Avoiding having to import('../types') all over the place

[HenrikJoreteg]

Hey all! 👋

Is there a way to declare that you want types that you export from a root types.d.ts to just be available from your JS without needing to import them?

I've done this at the top of a file to redeclare the types locally, but would be nice to avoid this. Feels like it should exist and I'm just not doing it right:

/** @typedef {import('../types').Bundle} Bundle */
/** @typedef {import('../types').StoreInstance} StoreInstance */

// now i can just reference {Bundle} within JS doc. 

[Raynos]

https://github.com/voxpelli/types-in-js/blob/main/FAQ.md#i-want-to-share-some-helper-interfaces-or-aliases-globally-in-my-jsdoc-project

[HenrikJoreteg]

Thanks @Raynos! The only problem is it doesn't seem to be working, I must be doing something wrong.

I suspect it might be an issue because the jsconfig.json file is complaining so maybe it's not being referenced properly as a result?

So here's what I've got, but for some reason, it reports errors even though I'm excluding the very thing it says is an issue:

[HenrikJoreteg]

I've tried a bunch of stuff, as jsconfig.json, tsconfig.json, moving it to different levels in the folder structures, etc. Looking through all the various settings, uninstalling the global version of typescript i apparently had installed... nothing I've tried has allowed me to not need the import so far. It's not that it's so terrible, but... would just be slick to not need to.

Oh well. Just wondered if there was something obvious I was missing.

[Raynos]

So i left out some details I think. For example declare global {} if you have import statements.

Also if you use files you probably have to include all the files. jsconfig has many permutations, i had to try different things until i got it working.

The only way to get types into global scope is with declare; or at least that's what i've found.

[HenrikJoreteg]

@Raynos yes! wrapping the whole thing in declare global works!

declare global {
  type Something = 'value' | 'value2'
}

I didn't actually need the jsconfig for that to work either.

[Gozala]

I did not liked introducing globals so I kept doing typedef {importing all over the place, but recently by an accident I've discovered a different workaround that allows me to import a module and all the types. Here it is in nutshell:

lib.js (actual implementation lives here)

import * as API from "./result.js"
/**
 * @template T
 * @param {T} value
 * @returns {API.Result<never, T>}
 */
export ok = (value) => ({ ok: true, value })
// ...

result.js (just a facade for lib.js)

export * from "./lib.js"

result.ts (shadows result.js and declares all the types)

export * from "./lib.js"
export type Result<X, T> =
  | { ok: true, value: T }
  | { ok: false, error: X }

Now any other module can import module and all the types as follows:

import * as Result form "../path/to/result.js"

/**
 * @template X, T
 * @param {Result.Result<X, T>} result
 * @param {(t:T) => U} f
 * @returns {Result.Result<X, U>}
 */
export const map = (result, f) =>
  result.ok ? Result.ok(f(result.value)) : result

It is not perfect and I wish I did not have to have facade result.js, yet I'm satisfied with a this compromise