Настройка представляет собой «Создать приложение React» со следующим jsconfig.json
:
{
"compilerOptions": {
"experimentalDecorators": true,
"baseUrl": "src"
},
"include": ["src"]
}
Структура каталогов:
.
└── 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
Но Bar.js
сам не получает intellisense из собственного файла Bar.d.ts
, можно ли это исправить? Я попробовал директиву с тройной косой чертой (/// <reference path="Bar.d.ts"/>
), но это не помогло. Некоторые JSDoc помогли, но довольно бессмысленно иметь специальный файл объявлений и по-прежнему использовать JSDoc; также, вероятно, работает только с VSCode, что нежелательно:
export function Bar(
// When `type Props` is exported from the `.d.ts`:
/** @type {import("./Bar").Props} */ props
) {
VSCode также позволяет вам использовать JSDoc для получения подсказок по типам — я довольно активно использую его только в проектах JS, хотя я заявлю, что если вы хотите использовать файлы определения TS, почему бы просто не использовать TS полностью?
@Jhecht Я начал с JSDoc - не помню, какие проблемы с интеллектом у меня были с ним (было довольно давно), но именно поэтому я перешел к описанию фигур с файлами объявлений, что в итоге сработало для меня лучше, чем JSDoc. Не хочу беспокоить вас деталями, но было очень сложно полностью использовать TypeScript для проекта, так как это добавило бы еще один уровень сложности, с которым я не был готов иметь дело.