“这个表达式不可调用。联合类型的每个成员......都有签名，但这些签名都不互相兼容。” 为什么？

Question

如何在打字稿中连接联合类型的数组？

当我尝试使用concat联合类型的数组时，出现以下错误：

该表达式不可调用。联合类型的每个成员 '{ (...items: ConcatArray<{...}>[]): { ... }[]; (...项目: ({ ... } | ConcatArray<{ ...; }>)[]): { ...; }[]; } | { ...; }' 有签名，但这些签名都不相互兼容。

CodeSandbox：https://codesandbox.io/s/modern-breeze-qt9mb?file=/src/index.ts

代码示例：

const arr1 = [
  { val1: 1, val2: 2, val3: 3 },
  { val1: 11, val2: 22, val3: 33 }
];

const arr2 = [
  { val1a: "1a", val2a: "2a", val3a: "3a" },
  { val1a: "11a", val2a: "22a", val3a: "33a" }
];

const arr3 = [
  { foo: "lfsfs", bar: "fabgg" },
  { foo: "l414g", bar: "fahrh" }
];

function getRandomArr() {
  if (Math.random() < 0.5) {
    return arr2;
  } else {
    return arr1;
  }
}
//error
const FinalArr = getRandomArr().concat(arr3);

Answer 1

你正在追踪一条红鲱鱼。您的问题与“联合类型的数组”无关。问题是您尝试拥有不同类型的元素的所有concat数组，并且concat要求数组具有相同类型的元素T：

Array<T> {
    concat(...items: ConcatArray<T>[]): T[];
    concat(...items: (T | ConcatArray<T>)[]): T[];
}

以上内容来自lib.es5.d.ts.

您可以通过尝试以下代码并理解错误消息来快速简化问题并消除干扰：

const a = arr1.concat(arr3)   // error
const b = arr2.concat(arr3)   // error

您最初的错误消息还告诉您：“联合类型的每个成员......都有签名，但这些签名都不相互兼容。”

错误消息中提到“联合类型”的唯一原因是该消息想要告诉您不兼容的类型，并且 的返回类型getRandomArr()是联合类型（通过推断）。

解决方案

修复代码的方法有无数种。从类型安全的角度来看，选择最有意义的一个。这里有些例子：

如果你关心类型

如果您关心所涉及的各种数组的类型，请明确说明。假设您希望前三个数组保留其特定类型和类型安全性，并且您只希望 FinalArr 能够处理所有三个数组元素类型的元素。你可以这样做：

type FinalElemType 
   = typeof arr1[number] | typeof arr2[number] | typeof arr3[number]

function getRandomArr(): FinalElemType[] {
  ...
}

这将导致FinalArr也具有类型FinalElemType[]. 没有错误，并且您对类型很明确，因此拥有类型安全的代码，假设您使用的类型是有目的的，而不是为了消除错误而进行的黑客攻击。

如果你不关心类型/类型安全

输入数组unknown[]或any[]

如果您不关心数组具有不同类型的元素，只需让 Typescript 知道即可。例如，如果您按如下方式更改前两个数组的类型，则 concat 不会抱怨。检查所有元素的类型并getRandomArr了解发生了什么。

const arr1: unknown[] = [
  { val1: 1, val2: 2, val3: 3 },
  { val1: 11, val2: 22, val3: 33 }
];

const arr2: unknown[] = [
  { val1a: "1a", val2a: "2a", val3a: "3a" },
  { val1a: "11a", val2a: "22a", val3a: "33a" }
];

getRandomArr的返回类型也将变为unknown[]，并且它将允许您将任何其他数组连接到它。

或者，如果您想arr1通过保留它们的类型安全性，并且只不关心andarr3的类型，您可以这样做：getRandomArrFinalArr

const FinalArr = (getRandomArr() as any[]).concat(arr3);

使用扩展语法

正如@jsejcksn 建议的那样，“使用扩展语法来组合数组”，“请参阅tsplay.dev/wOzdRW ”。这允许您连接具有混合元素类型的数组：

type FinalElemType 
   = typeof arr1[number] | typeof arr2[number] | typeof arr3[number]

function getRandomArr(): FinalElemType[] {
  ...
}