React Typescript求累计和时报TS7053数字索引IBasis类型错误如何解决

你遇到的TS7053错误核心是两个逻辑错误：

• reduce累计值prev的类型定义错误：你要实现的是按数字类型的csId为键，存储对应csTotCommit累计和的映射对象，但你把prev定义为了IBasis类型。IBasis接口的属性都是固定的字符串键（rankId、csTrancheId等），原生不支持数字类型的键索引，所以触发索引类型校验报错。
• reduce逻辑不完整：没有传入初始值，也没有在迭代结束后返回累计值，无法正常完成累计计算。

export interface IBasis {
  rankId: number | null,
  csTrancheId: number | null,
  csId: number | null,
  csTotCommit: number | null,
  csBasisPerUnit: number | null,
}

// 定义csId到累计和的映射类型，支持数字索引
type CsIdCumMap = Record<number, number>

const cumSum = (data: IBasis[]) => {
  // 给reduce指定累计值类型，传入空对象作为初始值
  return data.reduce((prev: CsIdCumMap, curr: IBasis) => {
    // 增加csTotCommit非空判断，避免null参与计算生成NaN
    if (curr.csId && curr.rankId && curr.csTotCommit) {
      prev[curr.csId] = (prev[curr.csId] ?? 0) + curr.csTotCommit
    }
    // 每轮迭代返回累计对象，供下一轮使用
    return prev
  }, {} as CsIdCumMap)
}

• 用Record<number, number>定义的CsIdCumMap类型明确声明了「键为数字、值为数字」的索引规则，完全匹配你用csId做索引的需求，不会再触发索引类型报错。
• 初始值显式做了类型断言，避免TS对空对象的类型推导错误。
• 空值合并运算符??替代三元判断，简化累计赋值逻辑，同时兼容累计值为0的合法场景。

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