Typescript PropTypes 中的元组类型答案

【问题标题】：Tuple type in Typescript PropTypesTypescript PropTypes 中的元组类型
【发布时间】：2021-05-07 09:09:48
【问题描述】：

我目前正在使用 React 和 Typescript 编写组件，并且在涉及元组类型（在设置位置具有设置类型的数组）时遇到了一个问题。例如，假设我有一个组件设置如下：

interface Props {
    tuple: [string, number];
}

const Component: React.FunctionComponent<Props> = ({ tuple }) => <div>Component</div>;

Component.propTypes = {
    tuple: PropTypes.arrayOf([PropTypes.string, PropTypes.number]).isRequired,
};

这会在 Typescript 中引发错误，这是可以理解的，因为 arrayOf 与元组不同，因为在 arrayOf 中，字符串或数字类型可以位于数组中的任何位置。

所以对于我的问题 - 有没有办法使用带有 PropTypes 的元组？使用现有类型的解决方案或某种可以完成这项工作的自定义函数。我试过用谷歌搜索，但是这方面的内容似乎很薄弱，而且我用我自己的自定义 PropTypes 函数尝试的实验没有成功。

【问题讨论】：

我个人会在 Typescript 项目中完全停用 PropTypes。它们是多余的，并且不是特别有效的方式来实现 Typescript 已经强加的内容。您想要采用 PropTypes 的原因是什么？
@cefn PropTypes 提供了 Typescript 不会做的运行时类型检查。它们有两种不同的用途，根本不是“多余的”：stackoverflow.com/questions/41746028/…

标签： reactjs typescript tuples react-proptypes

【解决方案1】：

在这个 React 问题评论中提出了一个建议，该建议表明您可以如何专门化类型检查以考虑位置，因为支持 arrayOf 采用验证功能（类似于 map）...

https://github.com/facebook/prop-types/issues/230#issuecomment-431503477

function arrayOfShape(typeCheckers) {
  return PropTypes.arrayOf(
    (value, index, ...rest) => typeCheckers[index](value, index, ...rest)
  )
}

【讨论】：