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

Posted 2023-03-13

【中文标题】如何为无状态 React 组件创建 TypeScript 类型定义？

【英文标题】：How do I create a TypeScript type definition for a stateless React component?

【发布时间】：2018-11-29 12:20:01

【问题描述】：

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

示例组件可能如下所示：

myComponent.js

import React from 'react';

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

我希望我的类型定义为：

定义哪些道具是允许的（以及哪些是必需的） 它将返回 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)。

【参考方案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 是在这里破解智能感知的关键。

【讨论】：

你把这个放在什么文件里，那个文件在你的项目中的什么位置？

在我们的例子中，文件被命名为“index.d.ts”，它与有问题的 dist/index.js 文件匹配。

但是你可以在你的 package.json 中定义打字文件，像这样： "typings": "index.d.ts"

你们如何将类型注释文件添加到具有状态的功能组件（使用useState）？

我不认为类型定义会改变，除非道具改变？

【参考方案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 页面推荐 Type Definitions

【讨论】：

你在声明一个HOC，一个返回无状态函数组件的函数

【参考方案3】：

我觉得你需要var MyComponent: React.SFC<MyComponentProps>;

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

【讨论】：

如果我定义： var MyComponent: React.SFC;会自动导出吗？啊，这是一个很酷的想法——我没有意识到 TypeScript 会输出人类可读的东西。

【参考方案4】：

它是:，而不是=。

export const MyComponent:React.SFC<MyComponentProps> = ( prop1, prop2, prop3 ) => (
<div>
     prop1 ? prop2 : prop3 
</div>
);

【讨论】：

我已经更新了我的问题，但我认为这是重写打字稿中的组件。我正在为现有的 ES6 组件编写类型定义。

【参考方案5】：

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

我在 typescript 中这样创建一个无状态组件：

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

【讨论】：

这个答案展示了如何创建无状态组件，而不是无状态组件类型定义文件。

这是如何在 ts 中编写而不是如何按照问题要求声明定义。

我已经初始化了相同的接口。

【参考方案6】：

你可以试试这样的。

export type YourComponentType = 
  props1,
  props2


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

export default YourComponent;

【讨论】：

除非我遗漏了什么，否则我认为这是重写组件本身的一个示例。我想为现有的 ES6 模块创建一个 .d.ts 文件。我已经更新了我的问题