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?

Question

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
) {

Answer 1

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.