VSCode provides intellisense for Foo.js via a corresponding Foo.d.ts only when it’s imported somewhere; how to enable intellisense in a Foo.js itself?

Viewed 525

The setup is a “Create React App” with the following jsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "baseUrl": "src"
  },
  "include": ["src"]
}

The directory structure:

.
└── src
    └── Components
        └── Foo
            ├── Bar
            │   ├── Bar.js
            │   ├── Bar.d.ts
            │   └── index.js
            ├── Foo.js
            └── index.js

// React component `Foo` imports a component `Bar`:

import { Bar } from './Bar'

export function Foo(props) {
  //
}

// And gets full intellisense via `Bar.d.ts`:

type Props = {
  /** ... */
}

export declare function Bar(
  props: Props
): React.FunctionComponent

But Bar.js itself doesn’t get intellisense from its own Bar.d.ts file, is there a way to fix it? I tried the triple-slash directive (/// <reference path="Bar.d.ts"/>), but it didn’t help. Some JSDoc helped, but it’s rather pointless to have a dedicated declaration file and still use JSDoc; it also probably only works with VSCode, which is undesirable:

export function Bar(
  // When `type Props` is exported from the `.d.ts`:
  /** @type {import("./Bar").Props} */ props
) {
2 Answers

As of September 2020, this is intended (source):

[...] there is no supported scenario for "the .d.ts is a sidecar to the .js". The recommended thing to do here is use JS Doc to write your type annotations.

Follow TypeScript’s development to see if it changes in the future.

You can use JSDoc to define classes, functions, and everything just as you do in typescript.

One of the best usages I did was in the file connect.js file on Github. I did not want to commit the file containing DB credentials. So, I defined a class, enum, etc. in JSDoc.

Related