reactjs - 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
}

类定义？

Answer 1

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

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

当您测试组件如何与外部数据交互时，PropTypes 很有用，例如当您从 API 加载 JSON 时。 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