TypeScript剩余参数

摘要：在本教程中，您将学习 TypeScript 剩余参数以及如何使用它们将不确定数量的参数表示为数组。

剩余参数允许函数接受零个或多个指定类型的参数。在 TypeScript 中，剩余参数遵循以下规则

• 一个函数只有一个剩余参数。
• 剩余参数出现在参数列表的最后。
• 剩余参数的类型为数组类型。

具有单个类型的剩余参数

要声明剩余参数，请在参数名称前加上三个点 (…)，并使用数组类型作为类型注释

function fn(...rest: type[]) {
   //...
}Code language: JavaScript (javascript)

以下示例演示了如何使用剩余参数

function getTotal(...numbers: number[]): number {
    let total = 0;
    numbers.forEach((num) => total += num);
    return total;
}Code language: JavaScript (javascript)

在此示例中，getTotal() 计算传递给它的数字的总和。

由于 numbers 参数是剩余参数，因此您可以传递一个或多个数字来计算总和

console.log(getTotal()); // 0
console.log(getTotal(10, 20)); // 30
console.log(getTotal(10, 20, 30)); // 60Code language: JavaScript (javascript)

具有多个类型的剩余参数

TypeScript 允许您使用联合类型处理具有多个类型的剩余参数。例如

function combine(...args: (number | string)[]): [number, string] {
  let total = 0;
  let str = '';
  args.forEach((arg) => {
    if (typeof arg === 'number') {
      total += arg;
    } else if (typeof arg === 'string') {
      str += arg;
    }
  });

  return [total, str];
}

const [total, str] = combine(3, 'Happy', 2, 1, ' New Year');

console.log({ total });
console.log({ str });

输出

{ total: 6 }
{ str: 'Happy New Year' }Code language: CSS (css)

在此示例中，我们定义了一个 combine() 函数，它使用可以是数字或字符串的剩余参数来接受可变数量的参数

...args: (number | string)[]

该函数执行两件事

• 对所有数字求和
• 连接所有字符串。

然后，它返回一个元组，其中包含数字的总和和连接的字符串。

总结

• 使用剩余参数允许函数接受可变数量的相同或不同类型的参数。
• 使用 ...args type[] 语法定义具有相同类型的剩余参数。
• 使用 ...args (type1 | type2 ) [] 语法定义具有不同类型的剩余参数。