如何在 React PropType 中使用 Typescript Union Type?

Question

我正在尝试做这样的事情：

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

我收到此错误：

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

两个疑问：

1. 如何使用 PropType 键入它？
2. 有一种更简单的方法可以在 TypeScript 中创建 React APP 应用程序中同时使用 Typescript 和 PropType？

Answer 1

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

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

Answer 2

使用 Typescript 时，有一些工具可以将类型转换为其PropTypes等价物。

像这样的工具：

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

对于任何想知道为什么你应该将PropType与Typescript一起使用的人，请阅读这里。