Angular中按日期聚合数组值使用reduce报TS7015错误如何解决

错误根因 #

你的代码存在两个核心问题：

• 累加器初始值错误使用空数组[]，数组仅支持数字类型作为索引，你使用字符串类型的日期作为索引访问数组，不符合TypeScript类型要求，因此触发TS7015错误
• 累加逻辑仅做了加法计算但没有赋值，计算结果不会被保存到累加器中，即使解决类型问题也无法得到正确聚合结果

解决方案 #

推荐先用对象作为中间聚合容器（字符串键查找效率更高），聚合完成后再转为你需要的数组格式，完整代码如下：

// 先定义数据项类型（如果你的项目中已经定义过可以省略）
type UsageItem = {
  xUsed: number;
  date: string;
}

// 第一步：按日期聚合xUsed总和
const dateAggregateMap = this.test.reduce<Record<string, number>>((acc, curr) => {
  // 存在该日期则累加，不存在则初始化为当前xUsed值
  acc[curr.date] = (acc[curr.date] ?? 0) + curr.xUsed;
  return acc;
}, {});

// 第二步：将聚合对象转为目标数组格式
const res: UsageItem[] = Object.entries(dateAggregateMap).map(([date, xUsed]) => ({
  date,
  xUsed
}));

代码说明 #

• 给reduce指定泛型Record<string, number>，明确累加器是键为字符串、值为数字的对象，避免TypeScript报隐式any的类型错误
• 用?? 0做兜底处理，避免首次遇到新日期时取值为undefined导致运算结果为NaN
• 最终输出的res结构完全符合你的预期，针对你给出的测试用例，输出结果为：

[
  { xUsed: 20, date: "2021-01-01" },
  { xUsed: 3, date: "2021-01-02" }
]

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