使用泛型约束与keyof动态访问数组元素的TS类型报错问题

两个报错本质都是泛型约束和实际索引逻辑不匹配导致的：

• 你写的复现用例getKeyOfT错误非常直观：Key extends keyof T约束的是T类型本身的属性键，但你要索引的对象是T[]（T组成的数组），数组的合法索引是number类型，和T的属性键没有任何关系，TS自然会抛出“不能用keyof T索引T[]类型”的错误。这里的逻辑错误是：你要取的是数组内单个元素的属性，不是数组实例本身的属性。
• Table组件的报错有两个诱因：
  1. 冗余定义了双泛型参数<T, Key extends keyof T>，实际上columns就是T的键组成的数组，不需要单独抽Key泛型，额外套Extract也没有实际的类型收窄效果。
  2. TS完全不知道泛型T的属性值是什么类型，它无法确认row[col]是React可以直接渲染的ReactNode类型——毕竟T的属性完全可能是对象、函数、Symbol这类不能直接渲染的值，所以会抛出类型不匹配错误。

不需要用类型断言绕开检查，直接从泛型约束层面解决问题即可：

import type { ReactNode } from 'react';

// 约束泛型T的所有字符串属性值必须是React可直接渲染的类型
function Table<T extends Record<string, ReactNode>>({
  data,
  columns,
}: {
  data: T[];
  // 仅允许传入T的合法键作为列配置，和你原本用Extract的限制效果一致
  columns: (keyof T)[];
}) { 
  return (
    <div>
      {data.map((row, rowIdx) => (
        <tr key={rowIdx}>
          {columns.map((col) => (
            <td key={col}>{row[col]}</td>
          ))}
        </tr>
      ))}
    </div>
  );
}

这个实现完全保留了你要的泛型限制：columns只能传data数组元素的合法键，同时不会有任何类型报错。
如果你业务场景里T确实存在非ReactNode类型的属性（比如嵌套对象、函数），不要用类型断言强行跳过检查，只需要在渲染对应列的时候做值转换即可，比如把对象转成JSON字符串、格式化日期等，避免运行时渲染异常。

针对你写的复现用例，修正后的逻辑如下，核心是先取数组内的元素，再用key索引元素属性：

// 错误写法：用T的键索引数组本身
// function getKeyOfT<T, Key extends keyof T>(array: T[], key: Key) {
//   return array[key];
// }

// 正确写法
function getValueFromArrayItem<T, Key extends keyof T>(
  array: T[],
  itemIndex: number,
  key: Key
) {
  return array[itemIndex][key];
}

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