Angular TypeScript中Array.reduce()类型错误及对象数组合并需求

我明白你遇到的问题了——在用Array.reduce()合并两个Ingredient数组时，因为类型推断的问题导致了类型错误，同时需要实现“存在则求和amount，不存在则添加”的逻辑对吧？咱们一步步来搞定它。

首先，先明确你的模型和数组定义：

class Ingredient {
  constructor(public name: string, public amount: number){ }
}

private ingredients: Ingredient[] = [
  new Ingredient('farina', 500),
  new Ingredient('burro', 80),
  new Ingredient('uccellini', 5)
];

private newIngredients: Ingredient[] = [
  new Ingredient('uova', 5),
  new Ingredient('farina', 200), // 举个重复name的示例
  new Ingredient('burro', 30)
];

问题根源 #

TypeScript对Array.reduce()的累加器类型推断很严格，如果初始值的类型没明确指定，或者累加过程中类型不一致，就会抛出类型错误。直接用数组作为累加器的话，很难同时兼顾类型安全和逻辑需求，所以更稳妥的方式是先用Map来做中间存储，最后再转成数组。

正确的实现代码（高性能版） #

// 合并两个数组的函数
mergeIngredients(): Ingredient[] {
  // 第一步：把初始数组转成Map，键为name，值为Ingredient（创建新对象避免修改原数组）
  const ingredientsMap = new Map<string, Ingredient>(
    this.ingredients.map(ing => [ing.name, new Ingredient(ing.name, ing.amount)])
  );

  // 第二步：用reduce遍历新数组，更新Map中的数据
  this.newIngredients.reduce((map, newIng) => {
    const existingIng = map.get(newIng.name);
    if (existingIng) {
      // 存在则创建新对象，amount求和后更新Map
      map.set(newIng.name, new Ingredient(newIng.name, existingIng.amount + newIng.amount));
    } else {
      // 不存在则直接添加新元素
      map.set(newIng.name, new Ingredient(newIng.name, newIng.amount));
    }
    return map;
  }, ingredientsMap); // 初始值明确为Map类型，TypeScript自动匹配类型

  // 第三步：把Map的值转成数组，得到最终结果
  return Array.from(ingredientsMap.values());
}

关键细节解释 #

• 用Map做中间存储：Map的键是Ingredient的name，可以快速判断元素是否存在，比遍历数组效率高，同时TypeScript能完美推断Map的类型（Map<string, Ingredient>）。
• 避免修改原数据：每次更新都创建新的Ingredient对象，符合不可变数据的原则，也能避免意外修改原数组的内容。
• 类型自动匹配：reduce的初始值是明确的Map<string, Ingredient>，TypeScript不会再抛出类型不匹配的错误。

另一种更直观的写法（直接合并后reduce） #

如果你想直接把两个数组合并后用一次reduce处理，也可以这样写：

mergeIngredients(): Ingredient[] {
  return [...this.ingredients, ...this.newIngredients].reduce((acc, curr) => {
    // 查找是否已有相同name的元素
    const existingIndex = acc.findIndex(ing => ing.name === curr.name);
    if (existingIndex !== -1) {
      // 存在则创建新数组，替换对应元素的amount
      return [
        ...acc.slice(0, existingIndex),
        new Ingredient(curr.name, acc[existingIndex].amount + curr.amount),
        ...acc.slice(existingIndex + 1)
      ];
    } else {
      // 不存在则添加新元素
      return [...acc, curr];
    }
  }, [] as Ingredient[]); // 必须明确指定初始值类型为Ingredient[]，否则TypeScript会推断为never[]
}

这种写法的核心是给reduce的初始值[]加上类型断言as Ingredient[]——因为TypeScript无法从空数组推断出正确的类型，手动指定后就能解决类型错误问题。

这两种写法都能满足你的需求，第一种用Map的方式性能更优（尤其是数组元素较多时），第二种写法更直观易读，你可以根据场景选择~

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