CODEWITHSUNDEEP
javascripttypescriptvisual-studio-code
Manu Artero
Manu Artero

Reputation: 10253

Reference a TS interface from jsDoc

Using VSCode is almost possible to have the benefits from Typescript in plain .js thanks to jsDoc notation and a tsconfig.json file:

{
  "compileOnSave": false,
  "compilerOptions": {
    "noEmit": true,
    "allowJs": true,
    "checkJs": true,
    "target": "es6",
    "resolveJsonModule": true,
    "moduleResolution": "node",

  },
  "include": ["index.js", "./src"]
}

/**
 * @return {Promise<string>}
 */
const foo = Promise.resolve('hi');
module.exports = foo;

Now, is it possible to reference an interface defined in a d.ts at node_modules? in particular I'm returning a -let's call- "my_dependency.Storage" object but I'm unable to reference it using plain javascript:

/**
 * @param {Storage} storage
 */
const goo = storage => ...

will understand that I'm refering to Web Storage API from lib.dom.d.ts

import {Storage} from "my_dependency"

///<reference path="node_modules/my_dependency/lib/index.d.ts" />

/**
 * @param {my_module.Storage} storage
 */

Upvotes: 14

Views: 7590

Answers (1)

Manu Artero
Manu Artero

Reputation: 10253

As @Akxe mention this is how you can do this for referring a type from a lib:

/**
 * @param {import("my_dependency").Storage} storage
 */
const goo = storage => ...

Now, I found myself repeating that statement over and over again so I created an ambient alias as following:

types.d.ts

declare namespace MyProject {
  type St = import("my_dependency").Storage; // alias: reference my_dependency.Storage from plain js code
}

index.js

/// <reference path="types.d.ts"/>
...

src/foo.js

/**
 * @param {MyProject.St} storage
 */
const goo = storage => ...

==EDIT==

Here is a post at dev.to that expands this topic

Upvotes: 26

Related Questions