如何修复React+TS中reduce报TS2345类型不匹配错误

报错详情 #

TS2345: Argument of type '(prev: IBudget, current: IBudget) => IBudget | undefined' is not assignable to parameter of type '(previousValue: IBudget, currentValue: IBudget, currentIndex: number, array: IBudget[]) => IBudget'.
Type 'IBudget | undefined' is not assignable to type 'IBudget'.
Type 'undefined' is not assignable to type 'IBudget'.

错误原因 #

• 你写的reduce回调存在无返回值的分支：当prev.price或current.price为undefined时，代码没有显式return内容，会隐式返回undefined，导致回调返回值类型被推断为IBudget | undefined，和reduce要求的「必须返回和累加值同类型结果」的类型签名不匹配。
• IBudget接口中price是可选字段，本身存在undefined的可能，比较逻辑没有覆盖所有值存在的边界场景。
• 调用reduce时未传入初始值，虽然外层做了数组非空判断，但类型层面仍未完全消除边界风险。

修复方案 #

推荐写法（类型安全+无运行时风险） #

给reduce显式指定泛型类型、传入初始值，补全所有分支的返回逻辑：

export interface IBudget {
  title?: string,
  price?: number,
  date?: Date,
}

const [expenses,setExpenses] = useState<IBudget[]>([])

if (!isEmpty(expenses)){
  const max = expenses.reduce<IBudget>((prev, current) => {
    // 当前项无price，直接返回之前的最大值
    if (current.price === undefined) return prev;
    // 之前的最大值无price，直接替换为当前项
    if (prev.price === undefined) return current;
    // 两者都有price时正常比较
    return prev.price > current.price ? prev : current;
  // 传入初始值，price设为负无穷保证所有合法项都能参与比较
  }, { price: Number.NEGATIVE_INFINITY } as IBudget)
}

简化写法（依赖外层数组非空判断） #

如果已经确定数组非空，可以不传入初始值，但必须补全所有分支的兜底返回，杜绝隐式返回undefined的情况：

if (!isEmpty(expenses)){
  const max = expenses.reduce((prev, current) => {
    if (prev.price !== undefined && current.price !== undefined){
      return prev.price > current.price ? prev : current
    }
    // 兜底：返回存在price的项，两者都无price则返回前一项
    return prev.price !== undefined ? prev : current
  }) 
}

修复要点 #

• 所有分支必须有明确的IBudget类型返回值，不能出现隐式返回undefined的情况
• 可选字段的判断要覆盖所有可能为undefined的场景
• 建议给reduce显式传入泛型参数和初始值，从根源避免类型推断偏差和空数组运行时报错

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