TypeScript泛型接口方法问题：列表对象中如何指定泛型类型

问题根源 #

你当前的Column接口把formatter定义成了泛型方法，这要求该方法必须能处理任意类型的T并返回同类型值。但实际场景中，每个列的formatter只会针对特定数据类型（比如员工姓名是字符串），所以(cell: string) => string无法匹配<T>(cell: T) => T——后者要求方法能接受number、boolean等任意类型，显然你的特定类型方法做不到。

解决方案：将泛型提升到接口级别 #

把泛型参数从方法移到接口本身，让每个Column实例绑定到一个具体的数据类型，这样formatter就能明确针对该类型做处理。

基础修正代码示例 #

// 泛型接口，T代表当前列单元格的数据类型
interface Column<T> {
  key: string;
  label: string;
  // formatter仅针对当前列的T类型，返回值可按需设为原类型或字符串
  formatter?: (cell: T) => T | string;
}

// 员工数据类型示例
interface Employee {
  id: number;
  name: string;
  hireDate: Date;
}

// 针对Employee各字段定义列，每个列明确指定对应的数据类型
const listOfEmployeesColumns: Column<any>[] = [
  {
    key: 'id',
    label: 'ID',
    formatter: (cell: number) => `#${cell}` // 处理number类型，返回格式化字符串
  },
  {
    key: 'name',
    label: '姓名',
    formatter: (cell: string) => cell.toUpperCase() // 处理string类型
  },
  {
    key: 'hireDate',
    label: '入职日期',
    formatter: (cell: Date) => cell.toLocaleDateString() // 处理Date类型
  }
];

进阶优化：字段与类型严格绑定 #

如果想让列的key和formatter参数类型自动匹配，避免手动指定错误，可以结合keyof和映射类型实现强约束：

type ColumnForEntity<T> = {
  [K in keyof T]: {
    key: K;
    label: string;
    formatter?: (cell: T[K]) => string;
  };
}[keyof T];

// 使用时自动推导每个列的字段类型
const listOfEmployeesColumns: ColumnForEntity<Employee>[] = [
  {
    key: 'id',
    label: 'ID',
    formatter: (cell) => `#${cell}` // cell自动推导为number
  },
  {
    key: 'name',
    label: '姓名',
    formatter: (cell) => cell.toUpperCase() // cell自动推导为string
  }
];

这种方式不仅省去手动指定类型的麻烦，还能保证key对应的字段和formatter的参数类型完全一致，从根源上避免类型不兼容问题。

内容的提问来源于stack exchange，提问作者Tomasz Lipiński