How to make jsDoc "import" work with vscode?

Question

I want to import a node module with @import, but it seems visual studio code is not getting it. Or am I doing it wrong?

Nakasuji

I believe @import is a function in TypeScript, not JSDocs for JS. – Durrell

AFAIK jsDoc is using TypeScript internally – Nakasuji

JSDocs predates TypeScript by at least 5 years. Maybe 10. As I understand it, TypeScript uses Closure Compiler, which uses JSDocs, but it’s built upon what closure could do, such as adding an import directive. – Durrell

It's actually stupid what I wrote above. I meant: AFAIK vscode is using TypeScript internally to make sense of jsDoc directives. – Nakasuji

The question doesn't mention TypeScript. If you are using TS, you should add the TypeScript tag to your question. FWIW: You might want to read up on it's language server github.com/microsoft/TypeScript/wiki/… Even if it doesn't help, it is fascinating :D – Durrell

Answer 1

Personally I would suggest TypeScript over JSDoc.

Nevertheless, try something like this? (there is no @import tag in JSDoc).

// path/to/UiStore.js

/**
 * @typedef UiStore
 * @type {object}
 * @property {string} foo - description for foo
 * @property {string} bar - description for bar
 */

// path/to/another.js

/** @typedef {import("path/to/UiStore").UiStore} UiStore */

/** @type {UiStore} */
const uiStore = {
  foo: 'hello',
  bar: 'world',
};

With mobx-state-tree it works like this:

In file UiStore.js:

export const UiStoreType = UiStore.Type

and then in path/to/another.js

/**
 * @typedef Props
 * @prop { import("../stores/UiStore").UiStoreType } uiStore
 * @prop { import("../stores/DbStore").DbStoreType } dbStore
 */

Reservoir

This works within VSCode (assuming your eslint settings are set to TypeScript), but doesn't work with the generated docs. – Yerxa

(Diverges a little from the dir structure of your code, but..) is there any way to avoid rewriting the import directive for each StoreType that one wants to import? Something like: @typedef {import("../stores/StoresMap")} Stores and then simply use @prop { Stores.UiStoreType } uiStore & @prop { Stores.DbStoreType } dbStore? – Ofay

Answer 2

As of TypeScript 5.5, the @import syntax is now available within JSDoc. Per the release notes of TypeScript 5.5:

TypeScript now supports a new @import comment tag that has the same syntax as ECMAScript imports.

/** @import { SomeType } from "some-module" */
/**
 * @param {SomeType} myValue
 */
function doSomething(myValue) {
    // ...
}

With this update, the question author's example may very well work as-is. Note that Visual Studio Code's default version of TypeScript was updated to 5.5 in the June 2024 release (1.91).

Lymphangial