TypeScript联合类型数组调用concat报错：表达式不可调用，该如何解决？

你遇到的报错是TypeScript处理联合类型方法调用的典型限制：

• getRandomArr的返回值是typeof arr1 | typeof arr2，也就是两个元素结构完全不同的数组的联合类型
• TypeScript要求联合类型的属性/方法必须在所有联合成员上有兼容的签名，才能直接调用。这里arr1的concat方法只允许接收元素为{val1:number, val2:number, val3:number}的数组作为参数，arr2的concat方法只允许接收元素为{val1a:string, val2a:string, val3a:string}的数组作为参数，两个concat的签名不兼容，因此TypeScript判定该方法不可调用，抛出对应错误。

下面是几种常用的修复方案，可根据场景选择：

方案1：使用扩展运算符替代concat（最推荐） #

扩展运算符不依赖数组自身的concat方法签名，TypeScript可以正确推导拼接后的数组类型，语法更简洁：

const FinalArr = [...getRandomArr(), ...arr3];

该方案拼接后的数组类型会被自动推导为：
({val1:number, val2:number, val3:number} | {val1a:string, val2a:string, val3a:string} | {foo:string, bar:string})[]，保留完整的类型校验能力。

方案2：显式放宽返回数组的类型 #

如果不需要严格校验返回数组的元素类型，可以给getRandomArr指定更宽泛的返回类型，统一concat的签名：

// 可根据需求替换为 unknown[] 或你需要的通用类型
function getRandomArr(): Record<string, any>[] {
  if (Math.random() < 0.5) {
    return arr2;
  } else {
    return arr1;
  }
}
// 此时调用concat不会报错
const FinalArr = getRandomArr().concat(arr3);

方案3：类型收窄后调用 #

如果需要保留严格的类型校验，可以先对联合类型做收窄，再分别调用concat：

const randomArr = getRandomArr();
let FinalArr;
if ('val1' in randomArr[0]) {
  FinalArr = randomArr.concat(arr3);
} else {
  FinalArr = randomArr.concat(arr3);
}

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