Typescript PropTypes 中的元組類型

Question

我目前正在使用 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 的元組？ 使用現有類型的解決方案或某種自定義 function 可以完成這項工作。 我試過用谷歌搜索，但這個領域的內容似乎很薄弱，而且我用我自己的自定義 PropTypes 函數嘗試的實驗沒有成功。

Answer 1

在此 React 問題評論中提出了一個建議，該建議指示您如何專門進行類型檢查以考慮 position，因為支持 arrayOf 進行驗證 function（類似於 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)
  )
}