CODEWITHSUNDEEP
javascriptvisual-studio-codejsdoc
ralfstx
ralfstx

Reputation: 4023

Refer to type in different file in JSDoc without importing

I'm writing JavaScript (ES6) code in Visual Studio Code and enabled VSCode's type checking as explained in the VSCode docs.

When referring to a type that is defined in another file (Track in the example below), I get an error like [js] Cannot find name 'Track' at the JSDoc reference to that type unless I import it. When I import this type, I get an error from ESLint: [eslint] 'Track' is defined but never used. (no-unused-vars)

I don't want to disable the ESLint rule. Is there a way to import the type only for the type checks in VSCode?

import Track from "./Track";

export default class TrackList {

/**
 * Creates a new track list.
 * @param {Iterable<Track>} tracks the tracks to include
 */
constructor(tracks) {
    this._tracks = tracks ? Array.from(tracks) : [];
}
...

Upvotes: 23

Views: 8478

Answers (4)

Mike
Mike

Reputation: 14584

You can use import("%YOUR_LIB%").%TYPE%:

export default class TrackList {

/**
 * Creates a new track list.
 * @param {Iterable<import("./Track").Track>} tracks the tracks to include
 */
constructor(tracks) {
    this._tracks = tracks ? Array.from(tracks) : [];
}
...

Since Track is exported as default, you could also use:

/** @param {Iterable<import("./Track").default>}

Or as Tiago pointed out:

/** @typedef { import('./Track').default } Track */

/**
 * Creates a new track list.
 * @param {Iterable<Track>} tracks the tracks to include
 */
...

Upvotes: 7

Sergio
Sergio

Reputation: 61

Just to keep this topic updated:

With [email protected] you will be able to import JSDoc typedefs, that are automatically exported.

Take a look at this issue with a real working example. Also you can walk along webpack's code to see how they used JSDoc and typescript to statically chech their pure JS sourcecode base. here is their issue with JSDoc conventions where you can get insipration.

Upvotes: 6

Alex Elkin
Alex Elkin

Reputation: 624

The workaround to disable es-lint warning: using //eslint-disable-line no-unused-vars comment in the end of line with unused import.

import Track from './Track'; //eslint-disable-line no-unused-vars

export default class TrackList {

/**
 * Creates a new track list.
 * @param {Iterable<Track>} tracks the tracks to include
 */
constructor(tracks) {
  this._tracks = tracks ? Array.from(tracks) : [];
}
...

Upvotes: 1

Jeremy
Jeremy

Reputation: 786

I have a similar problem and here is how I solved it. 

//file.d.ts
export interface Foo {
    bar: number;
}

export as namespace Baz;

Doing this will make the Baz namespace global so you can use it anywhere without importing 

/**
 * @param {Baz.Foo} arg 
 */
function test(arg) {

}

Now you get intellisense and type checking in VSCode.
VS Code

Upvotes: 18

Related Questions