如何实现TypeScript接口中基于keyof T的动态值类型约束？

要让TableColumn接口里render方法的参数类型和fieldName指定的T属性类型自动匹配，核心是建立两者的类型绑定关系，有两种常用方法可以实现：

方法一：添加额外泛型参数锁定属性键 #

给TableColumn接口增加第二个泛型参数K，限制它只能是keyof T的子类型，这样就能精准关联fieldName和render的参数类型：

type Person = {
  name: string;
  age: number;
}

interface TableColumn<T, K extends keyof T> {
  fieldName: K;
  render: (value: T[K]) => unknown;
}

// 使用示例
const NameColumn: TableColumn<Person, 'name'> = {
  fieldName: 'name',
  render: (value) => { // value自动推导为string类型
    console.log(value.toUpperCase());
  }
}

const AgeColumn: TableColumn<Person, 'age'> = {
  fieldName: 'age',
  render: (value) => { // value自动推导为number类型
    console.log(value.toFixed(0));
  }
}

这种方式类型精准度高，每个实例明确指定对应的属性键，TypeScript会自动完成类型推导，无需手动标注render的参数类型。

方法二：生成联合类型自动匹配所有场景 #

如果不想手动指定第二个泛型参数，可以把TableColumn<T>定义为联合类型，覆盖T的所有属性对应的列类型：

type Person = {
  name: string;
  age: number;
}

type TableColumn<T> = {
  [K in keyof T]: {
    fieldName: K;
    render: (value: T[K]) => unknown;
  }
}[keyof T];

// 使用示例
const NameColumn: TableColumn<Person> = {
  fieldName: 'name',
  render: (value) => { // value自动推导为string类型
    console.log(value.length);
  }
}

const AgeColumn: TableColumn<Person> = {
  fieldName: 'age',
  render: (value) => { // value自动推导为number类型
    console.log(value + 1);
  }
}

// 错误示例：fieldName和render类型不匹配会直接报错
const InvalidColumn: TableColumn<Person> = {
  fieldName: 'name',
  render: (value: number) => {} // TypeScript会提示类型不兼容
}

这里用到了映射类型和索引访问类型：先为T的每个属性生成对应的列类型，再通过[keyof T]取出所有值组成联合类型。声明变量时无需额外指定键，TypeScript会根据fieldName自动推断render参数类型，一旦两者不匹配就会抛出错误。

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