React函数组件中TS泛型报错：如何利用U的键值适配其他泛型？

错误原因 #

你在类型声明里错误使用了typeof U——U是组件的泛型类型参数，本身就是类型，而typeof操作符仅用于获取运行时值的类型，不能作用于类型参数，这才触发了TS2693错误。

修正方案 #

直接使用泛型类型本身的类型推导，去掉多余的typeof：

• 表头类型里，keyof U直接表示U的所有键的联合类型，无需加typeof
• 行数据类型里，U[keyof U]直接表示U所有值的联合类型

修正后的代码片段：

const [spreadsheetHeaders, setSpreadsheetHeaders] = useState<CellBase<keyof U>[]>([]);
const [addedRows, setAddedRows] = useState<Matrix<CellBase<U[keyof U]>>>([[]]);

额外优化（可选） #

如果需要严格匹配props.selectedColumns指定的列（而非U的所有键），可以进一步约束类型：

// 确保selectedColumns的元素都是U的键
type SelectedKey = (typeof props.selectedColumns)[number] extends keyof U 
  ? (typeof props.selectedColumns)[number] 
  : never;

const [spreadsheetHeaders, setSpreadsheetHeaders] = useState<CellBase<SelectedKey>[]>([]);
const [addedRows, setAddedRows] = useState<Matrix<CellBase<U[SelectedKey]>>>([[]]);

内容的提问来源于stack exchange，提问作者Evan Andrewson