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