Search code examples
javascriptjsdoc

How can I export a global type using JSDoc?

I find myself having to repeat this process in multiple files.

/** @type {import('vue').Ref<string>} */
function fun(var) {
  /...
}

Is there a way to import a type once and use it in different files, like this:

/** @type {Ref<string>} */
function fun(var) {
  /...
}

// main.js
/** @global {import('vue')} - maybe.. */

and in other file, before:

/** @type {import('vue').Ref<string>}
const variable = ref('variable')

after:

/** @type {Ref<string>}
const variable = ref('variable')
Solution

  • To export a global type using JSDoc, you might be able to create a separate declaration file (.d.ts) and define the global type there. Then, you SHOULD be able to import the declaration file into the files where you want to use the global type.

    So you'd create a dec file of globalTypes.d.ts,

    /**
 * Defines a global type for Vue's Ref<string>
 */
declare global {
  type Ref<T> = import('vue').Ref<T>;
}

    Import the dec into your JS,

    // Import the global type definition
import './globalTypes.d.ts';

// Use the global type in your function
function fun(variable: Ref<string>) {
  // ...
}

    Then, you should, be able to use the global type in your main file.

    // Import the global type definition
import './globalTypes.d.ts';

// Declare and initialize a variable using the global type
const variable = ref('variable');

// Use the variable in other parts of the code
console.log(variable.value);