TypeScript无需新增Col泛型 如何根据id推断render参数类型

你原有写法里的T[this["id"]]会将所有keyof T对应的属性类型合并为联合类型，TypeScript不会针对单个Col实例的id取值做独立的类型绑定，所以无论id选什么值，render入参都会被推断为所有属性类型的联合。

无需给Col新增泛型参数，通过映射类型生成「每个属性对应配置」的联合类型即可实现需求：

interface User {
  name: string;
  enabled: boolean;
}

// 仅保留单个泛型参数T，符合要求
type Col<T extends Record<string, any>> = {
  [K in keyof T & string]: {
    id: K;
    render: (data: T[K]) => string;
  }
}[keyof T & string];

const cols: Array<Col<User>> = [
  {
    id: "name",
    // TS自动推断入参name为string类型，无需手动标注
    render: (name) => name
  },
  {
    id: "enabled",
    // TS自动推断入参enabled为boolean类型
    render: (enabled) => enabled ? "yes" : "no"
  }
];

• 首先遍历泛型T的所有属性键，为每个键单独生成绑定了对应类型的配置结构
• 通过索引访问[keyof T & string]将所有键对应的配置合并为联合类型
• TypeScript会根据你填写的id取值，自动匹配联合类型中对应的成员，精准推断render的入参类型

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