在 TS 中声明一个参数数量可变的函数

作者

在 TS 中声明一个参数个数可变的函数

Declare a Function with variable Number of Arguments in TS

使用剩余参数在 TypeScript 中声明具有可变数量参数的函数。

当函数接受不定数量的参数时，将使用剩余参数。它们出现在所有其他参数之后并使用...语法。

索引.ts
function getArgsAsArray(...args: string[]) {
  console.log(args); // 👉️ ['a', 'b', 'c']

  return args;
}

console.log(getArgsAsArray('a', 'b', 'c'));

这是另一个例子。

索引.ts
const multiply = (...numbers: number[]) => {
  console.log(numbers);
  return numbers.reduce((acc, curr) => acc * curr, 1);
};

console.log(multiply(1, 2, 3, 4)); // 👉️ 24

我们使用
剩余参数
语法来声明采用可变数量参数的函数。

示例中的两个函数采用任意数量的参数。该语法将传入的参数收集到一个数组中。 ...

请注意，我们将其余参数键入为Type[]和 not Type。这是因为...语法将所有传入的参数收集到一个数组中。

使用剩余参数时，请确保显式键入它们，否则它们将被隐式键入为any[].

其余参数必须放在最后

使用
剩余参数时，请确保它们排在最后。

索引.ts
// 👇️ rest parameter must come last
function getArgsAsArray(str: string, ...args: string[]) {
  console.log(str); // 👉️ 'a'
  console.log(args); // 👉️ ['b', 'c']

  return args;
}

console.log(getArgsAsArray('a', 'b', 'c'));
rest 参数必须放在最后的原因是，如果后面有其他参数，TypeScript 无法知道 rest 参数何时结束。

使用剩余参数时，请确保：

  1. 将其余参数键入为数组。
  2. 仅在函数参数列表的末尾使用剩余参数。

使用类型别名或接口

如果您的函数声明太忙，您也可以使用类型别名。

索引.ts
type Multiply = (...numbers: number[]) => number;

const multiply: Multiply = (...numbers) => {
  console.log(numbers);
  return numbers.reduce((acc, curr) => acc * curr, 1);
};

console.log(multiply(1, 2, 3, 4)); // 👉️ 24

考虑其余参数语法的一种简单方法是：

  • 其余参数的所有传入值都收集到一个数组中。
  • 只有函数定义中的最后一个参数可以是剩余参数。

请注意，剩余参数经常与剩余参数混淆。

parameters 和 arguments 之间的区别在于，函数参数是函数定义中列出的名称，而函数参数是调用函数时传递给函数的实际值。

这是使用剩余参数的示例。

索引.ts
//          👇️ this is rest parameters
function logger(...args: string[]) {
  console.log(args); // 👉️ ['a', 'b', 'c']
}

const arr = ['a', 'b', 'c'];

// 👇️ this is rest arguments
logger(...arr);

剩余参数也使用...语法，但在调用函数时使用，而不是在定义函数时使用。

The arr variable is an
array of strings, but the
logger() function takes multiple, comma-separated strings, so we can’t pass it
an array of strings directly.

This is why we used rest arguments – to unpack the values of the array in the
call to the logger() function.

If you need to pass a function as a parameter, check out the
following article.

# Additional Resources

You can learn more about the related topics by checking out the following
tutorials: