TypeScript React应用程序中的PropTypes

React.PropTypes在TypeScript React应用程序中使用是否有意义还是仅仅是"腰带和吊带"的情况？

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

interface Props {
    // ...
}
export class MyComponent extends React.Component { ... }

添加是否有任何实际好处

static propTypes {
    myProp: React.PropTypes.string
}

到班级定义？

如果要编写要由非TypeScript项目(例如组件库)使用的组件,那么这些项目将无法从基于PropTypes的类型验证中受益.

但是,如果您没有制作任何非TypeScript项目将要使用的内容,那么这是一个毫无意义的练习.现在尤其如此,TypeScript 2.4将支持JSX子类型检查(https://github.com/Microsoft/TypeScript/issues/13618).

千万记住,虽然React.PropTypes作为一个提供React.PropTypes,PropTypes.InferProps仍然是必要的,以便有传递到你的组件这些值.

我很想知道是否有一个工具可以React.PropTypes在编译时从TypeScript接口自动生成.那实在是太酷了.

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