TypeScript联合类型存在类型解析失败问题

这个问题确实有点绕，我来给你理清楚背后的原因和解决办法：

核心原因：联合类型变量 vs 联合类型表达式的方法调用差异 #

当你直接声明变量：

let arr: string[] | number[] = [1, 2];
arr.map(e => console.log(e));

TypeScript会对这个联合类型变量的方法调用做分配式检查——它知道arr要么是string[]要么是number[]，所以会验证你的回调函数e => console.log(e)对两种数组类型都适用：不管e是string还是number，console.log都能处理，所以编译器放行。

但当你用类型断言把arr强制转为string[] | number[]时：

(arr as string[] | number[]).map(e => console.log(e));

此时这个表达式的类型被视为一个不确定具体类型的联合类型值，TypeScript会尝试找到string[]和number[]的map方法的共同签名。而string[]的map要求回调参数是string，number[]的map要求参数是number，两者的交集是never——也就是说，编译器认为没有任何值能同时满足两种map的参数要求，所以会抛出错误。

解决办法 #

1. 显式指定回调参数类型 #

直接告诉编译器回调的参数可以是string | number，这样就能兼容两种数组类型：

(arr as string[] | number[]).map((e: string | number) => console.log(e));

2. 用类型守卫收窄类型 #

如果可以提前确定数组的具体类型，用类型守卫把联合类型收窄为单一类型，再调用map：

// 检查是否为number数组
if (arr.every(item => typeof item === 'number')) {
  arr.map(e => console.log(e)); // 此时arr被收窄为number[]
} else {
  arr.map(e => console.log(e)); // 此时arr被收窄为string[]
}

3. 避免多余的类型断言 #

其实你的变量arr本身已经是string[] | number[]类型了，完全没必要再做一遍断言，直接调用arr.map(...)就可以正常通过类型检查。

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