158. 精读《Typescript 4》

1 引言

随着 Typescript 4 Beta 的发布，又带来了许多新功能，其中 Variadic Tuple Types 解决了大量重载模版代码的顽疾，使得这次更新非常有意义。

2 简介

可变元组类型

考虑 concat 场景，接收两个数组或者元组类型，组成一个新数组：

function concat(arr1, arr2) {
  return [...arr1, ...arr2];
}

如果要定义 concat 的类型，以往我们会通过枚举的方式，先枚举第一个参数数组中的每一项：

function concat<>(arr1: [], arr2: []): [A];
function concat<A>(arr1: [A], arr2: []): [A];
function concat<A, B>(arr1: [A, B], arr2: []): [A, B];
function concat<A, B, C>(arr1: [A, B, C], arr2: []): [A, B, C];
function concat<A, B, C, D>(arr1: [A, B, C, D], arr2: []): [A, B, C, D];
function concat<A, B, C, D, E>(arr1: [A, B, C, D, E], arr2: []): [A, B, C, D, E];
function concat<A, B, C, D, E, F>(arr1: [A, B, C, D, E, F], arr2: []): [A, B, C, D, E, F];)

再枚举第二个参数中每一项，如果要完成所有枚举，仅考虑数组长度为 6 的情况，就要定义 36 次重载，代码几乎不可维护：

function concat<A2>(arr1: [], arr2: [A2]): [A2];
function concat<A1, A2>(arr1: [A1], arr2: [A2]): [A1, A2];
function concat<A1, B1, A2>(arr1: [A1, B1], arr2: [A2]): [A1, B1, A2];
function concat<A1, B1, C1, A2>(
  arr1: [A1, B1, C1],
  arr2: [A2]
): [A1, B1, C1, A2];
function concat<A1, B1, C1, D1, A2>(
  arr1: [A1, B1, C1, D1],
  arr2: [A2]
): [A1, B1, C1, D1, A2];
function concat<A1, B1, C1, D1, E1, A2>(
  arr1: [A1, B1, C1, D1, E1],
  arr2: [A2]
): [A1, B1, C1, D1, E1, A2];
function concat<A1, B1, C1, D1, E1, F1, A2>(
  arr1: [A1, B1, C1, D1, E1, F1],
  arr2: [A2]
): [A1, B1, C1, D1, E1, F1, A2];

如果我们采用批量定义的方式，问题也不会得到解决，因为参数类型的顺序得不到保证：

function concat<T, U>(arr1: T[], arr2, U[]): Array<T | U>;

在 Typescript 4，可以在定义中对数组进行解构，通过几行代码优雅的解决可能要重载几百次的场景：

type Arr = readonly any[];

function concat<T extends Arr, U extends Arr>(arr1: T, arr2: U): [...T, ...U] {
  return [...arr1, ...arr2];
}

上面例子中，Arr 类型告诉 TS T 与 U 是数组类型，再通过 [...T, ...U] 按照逻辑顺序依次拼接类型。

再比如 tail，返回除第一项外剩下元素：

function tail(arg) {
  const [_, ...result] = arg;
  return result;
}

同样告诉 TS T 是数组类型，且 arr: readonly [any, ...T] 申明了 T 类型表示除第一项其余项的类型，TS 可自动将 T 类型关联到对象 rest：