TypeScript React 应用程序中的 PropTypes

Question

在 TypeScript React 应用程序中使用 React.PropTypes 是否有意义，或者这只是“腰带和吊带”的情况？

由于组件类是用 Props 类型参数声明的：

 interface Props {
    // ...
}
export class MyComponent extends React.Component<Props, any> { ... }

添加有什么真正的好处吗

static propTypes {
    myProp: React.PropTypes.string
}

到类定义？

原文由 Ralph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将组件属性同时维护为 TypeScript 类型和 React.PropTypes 通常没有太大价值。

以下是一些有用的情况：

• 发布将由纯 JavaScript 使用的包，例如组件库。
• 接受并传递外部输入，例如 API 调用的结果。
• 使用来自可能没有足够或准确类型的库中的数据（如果有）。

所以，通常这是一个你可以信任你的编译时验证的问题。

较新版本的 TypeScript 现在可以根据您的 React.PropTypes ( PropTypes.InferProps ) 推断类型，但生成的类型可能难以使用或在代码中的其他地方引用。

原文由 Joel Day 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Typescript 和 PropTypes 有不同的用途。 Typescript 在 编译时 验证类型，而 PropTypes 在 运行时 检查。

Typescript 在您编写代码时很有用：如果您将错误类型的参数传递给 React 组件，它会警告您，为您提供函数调用的自动完成等。

当您测试组件如何与外部数据交互时，例如当您从 API 加载 JSON 时，PropTypes 很有用。 PropTypes 将通过打印有用的消息帮助您调试（在 React 的开发模式下）您的组件失败的原因：

 Warning: Failed prop type: Invalid prop `id` of type `number` supplied to `Table`, expected `string`

尽管看起来 Typescript 和 PropTypes 做同样的事情，但它们实际上根本不重叠。但是可以从 Typescript 自动生成 PropTypes，这样你就不必指定类型两次，例如：

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-it-does
• https://github.com/gcanti/prop-types-ts

原文由 afonsoduarte 发布，翻译遵循 CC BY-SA 4.0 许可协议