TypeScript 中的 Rest 参数

在 TypeScript 中，我们可以使用 Rest 参数来表示一个函数接收任意数量的参数，并将它们存储在一个数组中。

使用 Rest 参数

使用 Rest 参数非常简单，只需要在函数的参数列表前加上 ... 即可。下面是一个简单的示例：

function sum(...numbers: number[]) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3)); // 输出 6
console.log(sum(4, 5, 6, 7, 8)); // 输出 30

在上面的示例中，我们定义了一个名为 sum 的函数，它使用 Rest 参数来接收任意数量的数字参数。函数体内使用了数组的 reduce 方法来计算总和，并返回结果。

Rest 参数和解构

我们可以将 Rest 参数与解构语法结合使用，以便更方便地访问数组中的元素。下面是一个示例：

function printNumbers(...numbers: number[]) {
  const [first, second, ...rest] = numbers;
  console.log(`First number: ${first}`);
  console.log(`Second number: ${second}`);
  console.log(`Rest numbers: ${rest}`);
}

printNumbers(1, 2, 3, 4, 5);

/*
输出：
First number: 1
Second number: 2
Rest numbers: 3,4,5
*/

在上面的示例中，我们定义了一个名为 printNumbers 的函数，它使用 Rest 参数来接收任意数量的数字参数。在函数体内，我们使用解构语法将前两个参数分别存储在变量 first 和 second 中，然后将剩余的参数存储在数组 rest 中。

限制 Rest 参数类型

我们可以使用 TypeScript 的类型系统来限制 Rest 参数的类型。例如，我们可以将上面的示例改写如下：

function printNumbers(...numbers: [number, number, ...number[]]) {
  const [first, second, ...rest] = numbers;
  console.log(`First number: ${first}`);
  console.log(`Second number: ${second}`);
  console.log(`Rest numbers: ${rest}`);
}

printNumbers(1, 2, 3, 4, 5); // 编译通过
printNumbers('foo', 'bar', 1, 2, 3); // 编译错误：第一个参数必须是数字类型

在上面的示例中，我们使用了一个类型为 [number, number, ...number[]] 的元组类型来定义 Rest 参数的类型。这将强制函数的前两个参数必须是数字类型，而后面的参数可以是任何数量的数字类型。

总结

在 TypeScript 中，Rest 参数使得函数可以接收任意数量的参数，并以数组的形式访问这些参数。我们可以将 Rest 参数与解构语法结合使用，以方便地访问数组中的元素。此外，我们也可以使用 TypeScript 的类型系统来限制 Rest 参数的类型，以确保函数接收的参数符合预期。