反应 PropTypes 与 typescript 模板文字类型

Question

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

假设我有以下类型：

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

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

示例 ok： 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

我们可以提供自定义验证器 function 来检查 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”等进行验证