如何编写TypeScript泛型函数，按任意字段分组数组元素？

先看基础定义：

interface Person {
    name: string;
    surname: string;
    age: number;
}

const people: Person[] = [
    {name: 'John',      surname: 'Smith',  age: 41},
    {name: 'Catherine', surname: 'Smith',  age: 36},
    {name: 'Paul',      surname: 'Jones',  age: 22},
    {name: 'Albert',    surname: 'Plant',  age: 22},
];

我们需要一个泛型函数，支持按任意存在的字段分组数组元素，返回对应的Map，且TypeScript能自动推导键和值的类型。

泛型函数实现 #

function groupBy<T, K extends keyof T>(array: T[], key: K): Map<T[K], T[]> {
    const map = new Map<T[K], T[]>();
    for (const item of array) {
        const groupKey = item[key];
        // 若当前键未在Map中，初始化空数组
        if (!map.has(groupKey)) {
            map.set(groupKey, []);
        }
        // 将当前元素推入对应分组的数组
        map.get(groupKey)!.push(item);
    }
    return map;
}

类型安全的使用示例 #

按surname分组

const groupedBySurname = groupBy(people, 'surname');
// TypeScript自动推导类型为 Map<string, Person[]>
console.log(groupedBySurname.get('Smith'));
// 输出: [{name: 'John', surname: 'Smith', age: 41}, {name: 'Catherine', surname: 'Smith', age: 36}]

按age分组

const groupedByAge = groupBy(people, 'age');
// TypeScript自动推导类型为 Map<number, Person[]>
console.log(groupedByAge.get(22));
// 输出: [{name: 'Paul', surname: 'Jones', age: 22}, {name: 'Albert', surname: 'Plant', age: 22}]

泛型的作用说明 #

• T：代表数组元素的类型，调用时会自动从传入的数组推断（比如这里的Person）
• K extends keyof T：限制传入的key必须是T类型上存在的属性，避免传入不存在的字段（比如传'address'会直接触发类型错误）
• 返回值Map<T[K], T[]>：自动对应分组键的类型（比如surname是string，age是number）和分组值的类型（对应元素的数组）

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