如何在TypeScript中添加索引签名？reduce统计消息报错求助

Hey 👋，我来帮你搞定这个TypeScript的reduce统计问题，顺便把那个烦人的索引签名错误解决掉！作为新手遇到这种类型错误很正常，咱们一步步来：

为什么会出现这个错误？ #

当你用{}作为reduce的初始值时，TypeScript会默认把它推断成空对象类型{}，这个类型没有定义任何索引签名——也就是说TS不知道你接下来要往这个对象里加什么键值对，所以当你尝试访问counts[k]或者操作newArray的时候，它就会报错说“元素隐式具有'any'类型，因为类型'{}'没有索引签名”。

解决步骤：给累加器指定明确的类型 #

假设你的原始数组是类似这样的消息数组（比如按消息类型统计）：

// 示例原始消息数组
const messages = [
  { type: '邮件', content: 'xxx' },
  { type: '短信', content: 'yyy' },
  { type: '邮件', content: 'zzz' },
  { type: '聊天', content: 'aaa' },
  { type: '短信', content: 'bbb' },
];

我们要统计每种类型的消息数量，最终转成Rechart需要的[{name: '邮件', value: 2}, ...]格式。

第一步：定义累加器的类型

先声明一个类型，告诉TS我们的累加器是“键为字符串，值为数字”的对象：

// 定义统计结果的类型：键是消息类型（字符串），值是数量（数字）
type MessageCountMap = { [key: string]: number };

第二步：用带类型的reduce统计数量

在reduce方法上通过泛型<MessageCountMap>指定累加器的类型，同时把初始值{}断言成这个类型：

// 统计每种消息的数量
const countMap = messages.reduce<MessageCountMap>((acc, curr) => {
  // 获取当前消息的类型作为键
  const key = curr.type;
  // 如果该键还不存在，默认值设为0，再加1
  acc[key] = (acc[key] || 0) + 1;
  return acc;
}, {} as MessageCountMap);

这样一来，TypeScript就明确知道acc的结构了，访问acc[key]的时候就不会再报索引签名的错误啦！

第三步：转成Rechart需要的格式

接下来把统计好的对象转成Rechart能识别的数组格式：

const chartData = Object.entries(countMap).map(([name, value]) => ({
  name,
  value,
}));

最终chartData就是你需要的结构，可以直接传给Rechart的图表组件使用～

完整代码示例 #

// 原始消息数组
const messages = [
  { type: '邮件', content: 'xxx' },
  { type: '短信', content: 'yyy' },
  { type: '邮件', content: 'zzz' },
  { type: '聊天', content: 'aaa' },
  { type: '短信', content: 'bbb' },
];

// 定义统计映射的类型
type MessageCountMap = { [key: string]: number };

// 统计数量
const countMap = messages.reduce<MessageCountMap>((acc, curr) => {
  const key = curr.type;
  acc[key] = (acc[key] || 0) + 1;
  return acc;
}, {} as MessageCountMap);

// 转换为Rechart格式
const chartData = Object.entries(countMap).map(([name, value]) => ({ name, value }));

console.log(chartData);
// 输出：[{name: '邮件', value: 2}, {name: '短信', value: 2}, {name: '聊天', value: 1}]

额外小提示 #

如果你不想用索引签名类型，也可以用interface来定义：

interface MessageCountMap {
  [key: string]: number;
}

效果是完全一样的～

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