Question

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

示例组件可能如下所示：

myComponent.js

import React from 'react';

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

我希望我的类型定义为：

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

看看使用TypeScript创建React组件的this示例，我发现了类型：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>
}

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

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

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

Answer 1

尝试一下：

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

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

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

来自React官方推荐页面Type Definitions

Answer 2

经过很多摆弄后，我们决定进行以下设置。

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是破解此处智能的关键。

Answer 3

是Java SDK，而不是:。

Answer 4

我认为您需要var MyComponent: React.SFC<MyComponentProps>;

无论如何，您都可以考虑使用Typescript重写现有代码，只是为了查看tsc会生成什么样的定义。然后丢弃代码并仅保留定义。

Answer 5

我正在使用Microsoft提供的react打字稿react样板 https://github.com/Microsoft/TypeScript-React-Starter

我在打字稿中创建一个无状态组件，如下所示：

export interface IMyComponentProps {
   prop1: string;
   prop2: (event: React.MouseEvent) => void;
   prop3: number;
}

export class MyComponent extends React.Component<IMyComponentProps> {
    render(): JSX.Element {
        const {prop1, prop2} = this.props

        return (
            //My code here
            <button>prop1</button>
            <button>prop2</button>
        );
    }
}

Answer 6

您可以尝试这样的事情。

export type YourComponentType = {
  props1,
  props2
}

const YourComponent = ({
  props1,
  props2,
  ...restProps //additional props if passed to components.
}: YourComponentType) => (
  <div>{props1}</div>
)

export default YourComponent;

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

6 个答案: