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

Question

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

组件示例如下所示:

我的组件.js

import React from 'react';

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

我希望我的类型定义为：

• 定义哪些道具是允许的（哪些是必需的）
• 它将返回JSX

查看这个使用TypeScript创建React组件的示例，我发现了类型:< code>React。SFC。

我试着在我的定义中使用这个:

索引.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]'（'。

我对TypeScript很陌生，显然我错过了一些东西，但是我找不到任何关于为无状态组件创建类型定义的文章。

编辑要明确的是，我不想在TypeScript中重写我的组件。我想为现有的ES6无状态组件创建一个类型定义文件（*.d.ts）。

Answer 1

我认为您需要＜code＞var MyComponent:React.SFC

您可能会考虑用typescript重写现有代码，看看tsc会生成什么样的定义。然后丢弃代码，只保留定义。

Answer 2

试试这个:

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

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

  export const MyComponent: (props: MyComponentProps) => React.SFC<MyComponentProps>
}

来自官方 React 页面推荐 类型定义

Answer 3

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

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/definitely typed/definitely typed/blob/master/types/material-ui/index . d . ts

它与TypeDoc和VS Code的intellisense配合得很好。

我相信导出默认是在这里破解智能感知的关键。