TypeScript React应用程序中的PropTypes

React.PropTypes在TypeScript React Application中使用有意义吗？还是“皮带和吊带”的情况？

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

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

有添加任何真正的好处吗

static propTypes {
    myProp: React.PropTypes.string
}

对类的定义？

将两个组件道具同时保持为TypeScript类型通常没有太大价值React.PropTypes。

在某些情况下，这样做很有用：

• 发布将由普通JavaScript使用的包，例如组件库。
• 接受并传递外部输入，例如API调用的结果。
• 使用库中可能没有正确或正确键入的数据（如果有）。

因此，通常这是您可以信任编译时间验证多少的问题。

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

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自动生成PropType，这样您就不必两次指定类型，例如：

• 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

我猜想在某些混乱的情况下，在编译时无法推断道具的类型，那么propTypes在运行时查看使用生成的任何警告会很有用。

一种情况就是处理来自外部源的数据，这些外部数据的类型定义不可用，例如您无法控制的外部API。对于内部API，我认为值得编写（或更好地生成）类型定义（如果尚不可用）。

除此之外，我没有真正看到任何好处（这就是为什么我从来没有亲自使用过）。