Angular/TypeScript：接口中定义泛型返回函数，初始化时如何指定类型？

问题原因 #

你定义的TableDefinition<T>接口中，value是一个泛型函数<K>(order: T) => K，这意味着该函数需要支持返回任意类型K，但你实际传入的函数只能返回固定类型（比如string），TypeScript因此报错——它无法保证泛型K和实际返回类型一致。

解决方案 #

把返回类型K提升为接口的泛型参数，让每个TableDefinition实例对应一个固定的返回类型，这样数组里的每个元素就能拥有独立的返回类型。

1. 修改接口定义 #

export interface TableDefinition<T, K> {
  field: string;
  value: (order: T) => K;
}

2. 初始化数组的两种方式 #

方式一：显式指定联合类型数组

如果知道所有可能的返回类型，直接声明数组的联合类型：

// 假设Person有string类型的Id和number类型的Age
this.cols: (TableDefinition<Person, string> | TableDefinition<Person, number>)[] = [
  { field: 'id', value: (obj: Person) => obj.Id },
  { field: 'age', value: (obj: Person) => obj.Age }
];

方式二：用辅助函数自动推断类型

如果不想手动声明联合类型，写一个辅助函数帮TypeScript自动推断每个元素的类型：

function createTableCol<T, K>(field: string, value: (obj: T) => K): TableDefinition<T, K> {
  return { field, value };
}

this.cols = [
  createTableCol('id', (obj: Person) => obj.Id),
  createTableCol('age', (obj: Person) => obj.Age)
];

这样TypeScript会自动推断出cols的类型是(TableDefinition<Person, string> | TableDefinition<Person, number>)[]，完全符合每个元素返回不同类型的需求。

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