TypeScript：如何基于泛型和元组元素定义关联元组类型？

你的问题出在直接使用联合类型标注变量时，TypeScript无法锁定元组对应的具体键，导致渲染函数的参数类型无法被正确推断。

问题根源 #

你定义的ColumnDefinitionTuple<TRowData>是一个联合类型，包含了TRowData所有键对应的元组变体。当你给变量直接标注这个联合类型时，TypeScript只知道当前元组是联合中的某一种，但无法确定具体对应哪个键，因此没法将渲染函数的参数类型精准关联到第一个元素的键值类型，最终只能推断为any。

解决方案：用泛型函数辅助类型推断 #

通过泛型函数来创建列定义，让TypeScript在调用函数时捕获具体的键类型K，从而自动约束渲染函数的参数类型为TRowData[K]：

// 定义泛型创建函数
function createColumn<TRowData, K extends keyof TRowData>(
  key: K,
  renderer: (cellValue: TRowData[K]) => string
): [K, (cellValue: TRowData[K]) => string] {
  return [key, renderer];
}

// 原有类型和数据定义不变
type MyDataDTO = {
  id: number;
  name: string;
  code: number;
};

const tableData: MyDataDTO[] = [
  { id: 1, name: "test-1", code: 101 },
  { id: 2, name: "test-2", code: 102 },
  { id: 3, name: "test-3", code: 103 },
];

// 使用泛型函数创建列定义，参数类型自动推断
const tableColumnsDefinition = createColumn<MyDataDTO>("id", (value) => {
  // value 被正确推断为 number 类型
  return `ID: ${value}`;
});

// 批量创建列数组时同样有效
const columns: Array<ReturnType<typeof createColumn<MyDataDTO>>> = [
  createColumn("id", (value) => value.toString()),
  createColumn("name", (value) => value.toUpperCase()),
  createColumn("code", (value) => `CODE-${value}`),
];

另一种写法：利用泛型约束直接定义元组 #

如果你不想额外写函数，也可以通过泛型变量直接约束元组，但需要手动指定键类型：

type ColumnDefinition<TRowData, K extends keyof TRowData> = [K, (cellValue: TRowData[K]) => string];

// 指定K为'id'，value自动推断为number
const tableColumnsDefinition: ColumnDefinition<MyDataDTO, 'id'> = [
  "id",
  (value) => `ID: ${value}`
];

这种写法虽然可行，但需要手动指定键类型，灵活性不如泛型函数。

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