React PropTypes 与打字稿模板文字类型

Question

Typescript 4.1 允许使用 Template Literal Types，它可用于模拟简单的正则表达式模式，因此我可以断言某些类型的字符串而不是任何字符串。

假设我有以下类型：

type percentStr = `${number}%`;
type relativeOrAbsStr = number | `${number | percentStr}${number | ''}`;

可以是一个数字，一个数字字符串后跟 % 和可选的另一个数字：

示例正常：33（数字），'33%'，'10%330'，'500%30'
示例错误：'23'（字符串数字后面没有 %）

但是 - 如果尝试使用 PT.string 作为选项，PropTypes 会抱怨，因为这种类型不能是任何字符串，它应该是特定形状的字符串。

import PT from 'prop-types';
type myStr:relativeOrAbsStr = PT.oneOfType([PT.string, PT.number])
// Type 'string' is not assignable to type 'relativeOrAbsStr'.

目前，作为一种解决方法，我使用 as any 断言：

type myStr:myStr:relativeOrAbsStr = PT.oneOfType([PT.string as any, PT.number]),

如何为我的模板字符串文字类型定义合适的 prop-types 类型？

Answer 1

我们可以提供自定义验证函数来检查 propType:

const pAnchorString = (props, propName, componentName) => {
  if (!/^\d+%?\d*$/.test(props[propName])) {
    return new Error('Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.');
  }
};

这将针对“10”、“10%”、“10%10”而不是 's'、“10s”等进行验证

React PropTypes 与打字稿模板文字类型

React PropTypes with typescript template literal Types

typescript

react-proptypes