如何实现表格中对象属性对应Cell组件的参数精准类型推导？

没问题，这个需求完全可以实现！你当前的代码里，泛型K被定义为ROW所有字符串类型键的集合，导致columns数组中所有Cell函数的参数都被推断为ROW[K]——也就是所有属性类型的联合类型（string | number）。要解决这个问题，我们需要让每个列对象对应ROW的单个具体键，让TypeScript能为每个Cell推断出对应的精准类型。

修改后的代码实现 #

function table<ROW extends object>({
  columns,
  data,
}: {
  // 核心：让columns的每个元素对应ROW的单个键的列类型
  columns: Array<{ [P in keyof ROW]: { id: P; Cell: (value: ROW[P]) => any } }[keyof ROW]>;
  data: Array<ROW>;
}) {
  return null;
}

table({
  columns: [
    { id: "prop1", Cell: (value) => value }, // value自动推断为string类型
    { id: "prop2", Cell: (value) => value }  // value自动推断为number类型
  ],
  data: [
    { prop1: "dsfdgsfg", prop2: 23434245 },
    { prop1: "jghfjjk", prop2: 346466 }
  ]
});

关键原理解释 #

1. 移除泛型K，改用映射类型：不再用单个泛型表示所有键，而是通过映射类型为ROW的每个键生成专属的列类型：

   • { [P in keyof ROW]: { id: P; Cell: (value: ROW[P]) => any } }：遍历ROW的每个键P，为每个键生成对应的列结构（id为当前键，Cell的参数类型为该键对应的值类型）。
   • [keyof ROW]：通过索引访问，把上述对象的所有值提取出来，形成所有单个键对应列类型的联合类型。

2. 联合类型自动分发：当columns被定义为这个联合类型的数组时，TypeScript会自动为数组中的每个元素匹配对应的联合分支，从而让每个Cell函数的value参数获得精准的ROW[P]类型。

可选的进阶写法（TS 4.0+可变元组） #

如果希望更明确地约束列与数据的对应关系，还可以用可变元组泛型实现：

function table<ROW extends object, COLS extends Array<{ id: keyof ROW }>>({
  columns,
  data,
}: {
  columns: { 
    [I in keyof COLS]: COLS[I] extends { id: infer P } 
      ? P extends keyof ROW 
        ? { id: P; Cell: (value: ROW[P]) => any } 
        : never 
      : never 
  };
  data: Array<ROW>;
}) {
  return null;
}

不过第一种写法已经能满足核心需求，且更简洁易读。现在你可以看到，prop1对应的Cell参数会被精准推断为string，prop2对应的则是number，完全符合你的预期！

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