如何让接口中的属性类型相互关联？

要让field属性的取值和renderCell的dataItem类型严格对应，你需要给TableColumn接口增加一个具体键名的泛型参数，而非仅依赖整个数据结构的泛型D。

修改后的类型定义 #

import type { ReactNode } from 'react';

interface TableColumn<D, K extends keyof D> {
  field: K;
  renderCell: (dataItem: D[K]) => ReactNode;
}

interface Data {
  foo: string;
  bar: Date;
  fiz: number;
}

const data: Data = {
  foo: "my foo",
  bar: new Date(),
  fiz: 32
}

使用示例 #

现在每个TableColumn实例会根据field的取值自动推导dataItem的具体类型：

// dataItem 类型为 string
const tableColumn: TableColumn<Data, 'foo'> = {
  field: "foo",
  renderCell: (dataItem) => dataItem 
}

// dataItem 类型为 Date
const tableColumn1: TableColumn<Data, 'bar'> = {
  field: "bar",
  renderCell: (dataItem) => dataItem 
}

// dataItem 类型为 number
const tableColumn2: TableColumn<Data, 'fiz'> = {
  field: "fiz",
  renderCell: (dataItem) => dataItem 
}

更简洁的自动推导方式 #

如果不想手动指定K，可以创建辅助函数让TypeScript自动推导类型：

function createTableColumn<D, K extends keyof D>(column: TableColumn<D, K>) {
  return column;
}

// 自动推导 dataItem 为 string
const tableColumn = createTableColumn<Data>({
  field: "foo",
  renderCell: (dataItem) => dataItem 
});

这样就能保证field和renderCell的参数类型完全绑定，不会再出现string | Date | number的联合类型。

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