为何TypeScript中reduce传入数字初始值时类型推断异常？

问题场景 #

当使用reduce()处理包含number | undefined类型的数组，且传入数字类型初始值0时，TypeScript会将累加器sum的类型推断为number | undefined，导致报错：

const a: (number | undefined)[] = [1, 2, 3]

const b =  a.reduce((sum, el) => {
//                    ^? number | undefined
  if (typeof el === 'number') {
    return sum + el
//  Error!  ^ 'sum' is possibly 'undefined'.(18048)
  }
  return sum
}, 0)

可行的解决方法 #

通过显式指定reduce()的泛型类型number，可以让TypeScript正确推断累加器类型：

const a: (number | undefined)[] = [1, 2, 3]

const b =  a.reduce<number>((sum, el) => {
//                            ^? number
  if (typeof el === 'number') {
    return sum + el
  }
  return sum
}, 0)

困惑点 #

让人不解的是，当累加器类型与数组元素类型不同时，TypeScript却能自动正确推断类型。比如初始值传入空字符串''，累加器会被推断为string：

const a: (number | undefined)[] = [1, 2, 3]

const b =  a.reduce((sum, el) => {
//                    ^? string
  if (typeof el === 'number') {
    return sum + el
  }
  return sum
}, '')

原因解释 #

这是因为TypeScript对reduce()的类型推断逻辑有特殊规则：当初始值类型是数组元素类型的子集时，TS会倾向于将累加器类型推断为数组元素的完整类型（即number | undefined），而非直接采用初始值类型。它会假设回调函数有可能返回数组元素类型的值（比如不小心返回el而非sum），因此扩大了累加器的类型范围以覆盖所有可能。

而当初始值类型（比如string）和数组元素类型（number | undefined）没有交集时，TS无法将两者合并为有意义的联合类型，因此会直接采用初始值的类型作为累加器类型，不会出现歧义。

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