关于reactjs：如何在React PropTypes中使用Typescript联合类型？


How to use Typescript Union Type in React PropTypes?

我正在尝试执行以下操作：

1
2
3
4
5
6
interface Props extends RouteComponentProps {
  country: 'ONE' | 'OTHER;
}
MyComponent.propTypes = {
  country: PropTypes.oneOf(['ONE', 'OTHER']).isRequired,
};

我收到此错误：

1
2
Type 'Validator<string>' is not assignable to type 'Validator<"ONE" |"OTHER">'.
  Type 'string' is not assignable to type '"ONE" |"OTHER"'.ts(2322)

两个疑问：

  • 如何使用PropTypes进行输入？
  • 在TypeScript创建React APP应用程序中，有一种使用Typescript和PropTypes的更简单方法吗？
    • 相关讨论

    使用const断言将类型从string[]缩小为['ONE', 'OTHER']：

    1
    2
    3
    MyComponent.propTypes = {
      country: PropTypes.oneOf(['ONE', 'OTHER'] as const).isRequired,
    };

    相关讨论

    使用Typescript时，有一些工具可以将类型转换为它们的PropTypes等值形式。

    类似的工具：

    • babel-plugin-typescript-to-proptypes
    • prop-types-ts

    对于任何想知道为什么应该将PropTypes与Typescript一起使用的人，请阅读此处。