如何为无状态 React 组件创建 TypeScript 类型定义？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50946979/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I create a TypeScript type definition for a stateless React component?
提问by penguinflip
I'm trying create type definitions for an existing suite of statelessReact components, so I can generate documentation automagically and to improve intellisense in my team's tooling.
我正在尝试为现有的无状态React 组件套件创建类型定义，以便我可以自动生成文档并改进我团队工具中的智能感知。
An example component could look like this:
示例组件可能如下所示：
myComponent.js
我的组件.js
import React from 'react';
export const MyComponent = ({ prop1, prop2, prop3 }) => (
<div>
{ prop1 ? prop2 : prop3 }
</div>
);
I would like my type definition to:
我希望我的类型定义为：
- Define which props are allowed (and which are required)
- That it will return JSX
- 定义允许哪些道具（以及哪些是必需的）
- 它将返回 JSX
Looking at thisexample of creating React components using TypeScript, I discovered the type: React.SFC.
查看这个使用 TypeScript 创建 React 组件的示例，我发现了类型：React.SFC.
I tried to use this in my definition:
我试图在我的定义中使用它：
index.d.ts
索引.d.ts
declare module "MyComponent" {
import React from 'react';
interface MyComponentProps {
prop1: boolean;
prop2?: string;
prop3?: string;
}
export const MyComponent = React.SFC<MyComponentProps>
}
But I'm getting the linting error [ts] '(' expected.
但我收到了 linting 错误 [ts] '(' expected.
I'm pretty new to TypeScript and I am clearly missing something, but I can't find any articles on creating type definitions for stateless components.
我对 TypeScript 还很陌生，显然我遗漏了一些东西，但是我找不到任何关于为无状态组件创建类型定义的文章。
EDITTo be clear, I don't want to rewrite my components in TypeScript. I want to create a type definition file (*.d.ts) for an existing ES6 stateless component.
编辑要清楚，我不想在 TypeScript 中重写我的组件。我想为现有的 ES6 无状态组件创建一个类型定义文件 (*.d.ts)。
采纳答案by penguinflip
After a lot of fiddling, we have settled on the following set up.
经过一番折腾，我们确定了以下设置。
import React from 'react';
export interface MyComponentProps {
prop1: boolean;
prop2?: string;
prop3?: string;
}
declare const MyComponent: React.SFC<MyComponentProps>
export default MyComponent
The inspiration for this was taken from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts
灵感来源于：https: //github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/material-ui/index.d.ts
It works well with TypeDoc and also VS Code's intellisense.
它适用于 TypeDoc 和 VS Code 的智能感知。
I believe export defaultwas the key to cracking intellisense here.
我相信这export default是在这里破解智能感知的关键。
回答by suleyman
Try this:
试试这个：
declare module "MyComponent" {
import React from 'react';
interface MyComponentProps {
prop1: boolean;
prop2?: string;
prop3?: string;
}
export const MyComponent: (props: MyComponentProps) => React.SFC<MyComponentProps>
}
From official React page recommendations Type Definitions
来自官方 React 页面推荐类型定义
回答by Tommi Komulainen
I think you need var MyComponent: React.SFC<MyComponentProps>;
我想你需要 var MyComponent: React.SFC<MyComponentProps>;
You might consider rewriting existing code in typescript anyway just to see what kind of definitions tsc would generate. Then discard the code and keep just the definitions.
无论如何，您可能会考虑在打字稿中重写现有代码，只是为了看看 tsc 会生成什么样的定义。然后丢弃代码并只保留定义。
回答by Rohith Murali
Its, :, not =.
它，:， 不是=。
export const MyComponent:React.SFC<MyComponentProps> = ({ prop1, prop2, prop3 }) => (
<div>
{ prop1 ? prop2 : prop3 }
</div>
);
回答by A Qadeer Qureshi
You can try something like this.
你可以尝试这样的事情。
export type YourComponentType = {
props1,
props2
}
const YourComponent = ({
props1,
props2,
...restProps //additional props if passed to components.
}: YourComponentType) => (
<div>{props1}</div>
)
export default YourComponent;
回答by GAJESH PANIGRAHI
I am using react typescript react boilerplate provided by Microsoft https://github.com/Microsoft/TypeScript-React-Starter
我正在使用 Microsoft https://github.com/Microsoft/TypeScript-React-Starter提供的 react typescript react 样板
I create a stateless component in typescript like this:
我在打字稿中创建了一个无状态组件，如下所示：
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>
);
}
}
