reactjs - 如何为无状态 React 组件创建 TypeScript 类型定义？

Question

我正在尝试为现有的无状态 React 组件套件创建类型定义，这样我就可以自动生成文档并改进我团队工具中的智能感知。

示例组件可能如下所示:

我的组件.js

import React from 'react';

export const MyComponent = ({ prop1, prop2, prop3 }) => (
    <div>
        { prop1 ? prop2 : prop3 }
    </div>
);

我希望我的类型定义:

• 定义哪些 Prop 是允许的(哪些是必需的)
• 它将返回 JSX

查看this使用 TypeScript 创建 React 组件的示例，我发现了类型:React.SFC。

我试图在我的定义中使用它:

index.d.ts

declare module "MyComponent" {
    import React from 'react';

    interface MyComponentProps {
        prop1: boolean;
        prop2?: string;
        prop3?: string;
    }

    export const MyComponent = React.SFC<MyComponentProps>
}

但是我收到了 linting 错误 [ts] '(' expected.

我是 TypeScript 的新手，我显然遗漏了一些东西，但我找不到任何关于为无状态组件创建类型定义的文章。

编辑 明确地说，我不想用 TypeScript 重写我的组件。我想为现有的 ES6 无状态组件创建类型定义文件 (*.d.ts)。

Answer 1

经过大量摆弄后，我们确定了以下设置。

import React from 'react';

export interface MyComponentProps {
    prop1: boolean;
    prop2?: string;
    prop3?: string;
}

declare const MyComponent: React.SFC<MyComponentProps>

export default MyComponent

这方面的灵感来自: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts

它适用于 TypeDoc 以及 VS Code 的智能感知。

我相信 export default 是这里破解智能感知的关键。