TypeScript应用程序中的PropTypes

Question

使用是否有反应。PropTypes在TypeScript React应用程序中是有意义的，还是这只是“皮带和吊带”的一种情况？

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

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

添加有什么真正的好处吗

static propTypes {
    myProp: React.PropTypes.string
}

对类的定义？

Answer 1

正如@afonsoduarte所说。

我要补充的是，您还可以从PropTypes生成Typescript类型，如下所示：

const propTypes = {
  input: PropTypes.shape({
    id: PropTypes.number.isRequired,
    name: PropTypes.string.isRequired,
  }),
};

type MyComponentProps = PropTypes.InferProps<typeof propTypes>;

const MyComponent: FunctionComponent<MyComponentProps > = (props) => {
  // ...
}

MyComponent.propTypes = propTypes;

Answer 2

通常，将组件道具维护为TypeScript类型和React并没有多大价值。同时使用PropTypes。

以下是一些这样做有用的情况：

• 发布将由纯JavaScript使用的组件库之类的包

所以，通常是一个关于编译时验证的信任度的问题。

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

Answer 3

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

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

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

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

尽管看起来Typescript和PropType做的是同一件事，但它们实际上并没有重叠。但是可以从Typescript自动生成PropTypes，这样就不必指定两次类型，例如，请参见：

• https://github.com/milesj/babel-plugin-typescript-to-proptypes
• https://github.com/grncdr/ts-react-loader#what-确实如此
• https://github.com/gcanti/prop-types-ts