如何在TypeScript接口中关联keyof类型，消除format函数的any类型

当然可以消除any类型，并且把field的键类型和format的参数类型精准关联起来！核心思路是给Column接口增加一个额外的泛型参数，用来绑定当前列对应的具体属性键，这样TypeScript就能自动推断出该键对应的值类型。

步骤1：重新定义泛型Column接口 #

我们把Column改成接受两个泛型参数：T代表行对象的类型，K代表该列对应的T的属性键（必须是keyof T的子类型）。这样format的参数类型就能精准对应T[K]，也就是该属性的值类型：

interface Column<T, K extends keyof T> {
  header: string;
  field: K;
  format?: (value: T[K]) => string;
}

步骤2：定义列配置并自动推断类型 #

现在你定义列的时候，TypeScript会根据field的值自动推断出format参数的类型，完全不需要手动指定any：

const rows = [{name: 'Alice', age: 18}, {name: 'Bob', age: 12}];
type Row = typeof rows[0];

// 这里columns的类型会被自动推断为Array<Column<Row, "name"> | Column<Row, "age">>
const columns = [
  { 
    header: 'Name', 
    field: 'name', 
    format: (value) => value.toUpperCase() // value自动推断为string
  },
  { 
    header: 'Age', 
    field: 'age', 
    format: (value) => value.toLocaleString() // value自动推断为number
  },
];

如果你想显式约束columns的类型，也可以写成：

const columns: Array<Column<Row, keyof Row>> = [/* 列配置 */];

步骤3：适配renderTable函数 #

renderTable函数的定义只需要保持对T的泛型约束，columns参数使用上面的Array<Column<T, keyof T>>类型即可，这样在函数内部处理时，TypeScript也能正确识别每个列的field和对应的值类型：

function renderTable<T>(rows: T[], columns: Array<Column<T, keyof T>>) {
  // 示例渲染逻辑
  rows.forEach(row => {
    const rowData = columns.map(col => {
      const rawValue = row[col.field];
      return col.format ? col.format(rawValue) : String(rawValue);
    });
    console.log(rowData); // 输出处理后的行数据
  });
}

renderTable(rows, columns);

为什么原来的方式不行？ #

原来的Column<T>中，field是keyof T（所有属性键的联合类型），如果直接把format的参数写成T[keyof T]，那会是所有属性值类型的联合（比如示例中的string | number），无法做到每个列的format参数对应具体的属性类型。而通过新增泛型K绑定具体的键，就能让每个列的类型独立，从而实现精准的类型关联。

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