reactjs - TypeScript React 应用程序中的 PropTypes

标签 reactjs typescript react-proptypes

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

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

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

添加有什么真正的好处吗

static propTypes {
    myProp: React.PropTypes.string
}

类定义?

最佳答案

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,这样你就不必指定类型两次,例如:

关于reactjs - TypeScript React 应用程序中的 PropTypes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41746028/

相关文章:

javascript - 将 2 个 div 渲染为一并隐藏并显示在 React 中

Typescript 元组扩展类型

reactjs - 如何在 React 组件 PropTypes 中定义替代必需属性?

javascript - 如何在 promise 中设置 react 钩子(Hook)的值(value)?

reactjs - React-Router-Dom 母版页

javascript - 更改表格列宽

javascript - 从具有零个或 1 个条目的 Map 获取值?

javascript - 时刻的 isSameOrBefore 和 isSameOrAfter 从时刻调用并经过时刻时返回 "is not a function"

reactjs - 相当于 PropTypes.arrayOf 的 TypeScript 声明是什么?

javascript - IntelliSense 不适用于我自己的 React 组件库