TypeScript Reduce函数类型错误咨询：原因与解决方法

1. totalCounterColors函数的错误原因及修复 #

错误原因 #

你给reduce传入的初始值是{}，TypeScript会默认将其推断为空对象类型{}，这个类型没有定义任何索引签名。当你用string类型的color去访问acc[color]时，TypeScript无法确定该属性的类型，因此抛出“Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'”的错误。

修复方案 #

给累加器acc指定明确的类型（比如Record<string, number>，表示键为字符串、值为数字的对象），有两种实现方式：

方式1：给累加器参数加类型注解

const totalCounterColors = characters.reduce((acc: Record<string, number>, curVal) => {
  const color = curVal.eye_color;
  // 简化判断逻辑：如果acc[color]不存在则取0，再加1
  acc[color] = (acc[color] || 0) + 1;
  return acc;
}, {} as Record<string, number>);

方式2：用泛型指定reduce的返回类型

const totalCounterColors = characters.reduce<Record<string, number>>((acc, curVal) => {
  const color = curVal.eye_color;
  acc[color] = (acc[color] ?? 0) + 1;
  return acc;
}, {});

2. totalUniqueColors函数的错误原因及修复 #

错误原因 #

你给reduce传入的初始值是[]，TypeScript会默认将其推断为**never[]类型**——因为空数组没有任何元素，TypeScript无法推断出数组元素的类型，只能用never表示“永远不会有值”。当你尝试往这个数组中pushstring类型的眼睛颜色时，就会出现“Argument of type 'string' is not assignable to parameter of type 'never'”的错误。

修复方案 #

明确告诉TypeScript累加器是string[]类型，有两种实现方式：

方式1：给初始值加类型注解

const totalUniqueColors = characters.reduce((acc, curVal) => {
  // 用includes替代indexOf，逻辑更直观
  if (!acc.includes(curVal.eye_color)) {
    acc.push(curVal.eye_color);
  }
  return acc;
}, [] as string[]);

方式2：用泛型指定reduce的累加器类型

const totalUniqueColors = characters.reduce<string[]>((acc, curVal) => {
  if (!acc.includes(curVal.eye_color)) {
    acc.push(curVal.eye_color);
  }
  return acc;
}, []);

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