迹忆客 专注技术分享

使用扩展语法在 TypeScript 中合并数组，例如 const arr3 = [...arr1, ...arr2]。 扩展语法会将数组的值解包到一个新数组中。 最终数组的类型将反映所提供数组中值的类型。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

// 👇️ const arr3: string[]
const arr3 = [...arr1, ...arr2];

我们使用扩展语法 (...) 将 2 个数组的元素解析到第三个数组中。

最终数组的类型将反映所提供数组的类型。

const arr1 = ['a', 'b'];
const arr2 = [1, 2];

// 👇️ const arr3: (string | number)[]
const arr3 = [...arr1, ...arr2];

// 👇️ ['a', 'b', 1, 2]
console.log(arr3);

我们使用扩展语法 (...) 将字符串和数字数组解析到第三个数组中。

第三个数组的类型是表示字符串和数字数组的联合。

使用扩展语法时，解析数组的顺序很重要。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

// 👇️ const arr3: string[]
const arr3 = [...arr2, ...arr1];

// 👇️ ['c', 'd', 'a', 'b']
console.log(arr3);

可以根据需要对尽可能多的数组重复此过程。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

// 👇️ const arr3: string[]
const arr4 = [...arr1, ...arr2, ...arr3];

// 👇️ ['a', 'b', 'c,' 'd', 'e', 'f']
console.log(arr4);

我们可能还会看到 Array.concat 方法用于在 TypeScript 中合并数组。

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];
const arr3 = ['e', 'f'];

// 👇️ const arr3: string[]
const arr4 = arr1.concat(arr2, arr3);

// 👇️ ['a', 'b', 'c,' 'd', 'e', 'f']
console.log(arr4);

concat 方法还合并两个或多个数组。 该方法将一个或多个数组作为参数，并将它们合并到调用它的数组中。

但是，我们应该坚持使用扩展语法 (...)，因为 TypeScript 中 concat 方法的分型并不那么直观。

const arr1 = ['a', 'b'];
const arr2 = [1, 2];

// ⛔️  Type 'number[]' is not assignable to
// type 'ConcatArray<string>'.ts(2769)
const arr3 = arr1.concat(arr2);

上面的示例导致类型检查器抛出错误，因为我们在字符串数组上调用了 concat() 方法并将其传递给了一个数字数组。

类型限定 期望我们只将与参数相同类型的数组传递给 concat 方法。

使用扩展语法 (...) 时情况并非如此，后者更加灵活。