如何将数组分组为指定的TypeScript GroupContainer类型？

场景回顾 #

现有数据源：

const dataUse = [
  { group: 'z', name: 'hello' },
  { group: 'z', name: 'hello2' },
  { group: 'z', name: 'hello3' },
  { group: 'x', name: 'hello1' },
  { group: 'x', name: 'hello2' }
];

使用groupBy函数按group字段分组：

const groupBy = <T, K extends keyof any>(arr: T[], key: (i: T) => K) =>
  arr.reduce((groups, item) => {
    (groups[key(item)] ||= []).push(item);
    return groups;
  }, {} as Record<K, T[]>);

const grouped = groupBy(dataUse, (i) => i.group);

分组后得到Record结构：

{
  x: [{ group: 'x', name: 'hello1' }, { group: 'x', name: 'hello2' }],
  z: [{ group: 'z', name: 'hello' }, { group: 'z', name: 'hello2' }, { group: 'z', name: 'hello3' }]
}

需要将其转换为自定义的GroupContainer类型数组：

type MyListObj = typeof dataUse[0];
type GroupContainer = {
  group: string;
  items: Array<MyListObj>;
};

期望输出：

[
  {group: 'x', items: [{ group: 'x', name: 'hello1' }, { group: 'x', name: 'hello2' }]},
  {group: 'z', items: [{ group: 'z', name: 'hello' }, { group: 'z', name: 'hello2' }, { group: 'z', name: 'hello3' }]}
]

实现方案 #

使用Object.entries()配合map()即可完成转换，代码如下：

const groupedArray: GroupContainer[] = Object.entries(grouped).map(([group, items]) => ({
  group,
  items
}));

说明 #

• Object.entries(grouped)会将Record对象拆分为[键名, 对应数组]的二维数组，比如['x', [...]]、['z', [...]]
• 通过map()遍历每一组键值对，将其映射为GroupContainer类型的对象，自动匹配group和items字段
• 手动指定: GroupContainer[]可以进一步确保类型安全，避免类型推断偏差

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