TypeScript：错误的参数数量

在 TypeScript 中，函数的参数数量包括位置参数和可选参数。如果函数的参数数量与函数签名中定义的参数数量不匹配，就会抛出编译时错误。在本文中，我们将探讨“2 个位置参数，但给出了 3 个”这个错误，并了解如何解决它。

错误信息

当我们定义了一个函数，并且向其中传递了比函数签名中定义的参数数量更多的参数时，TypeScript 就会抛出这个错误。具体的错误信息是：

Expected 2 arguments, but got 3.

这个错误信息告诉我们，函数签名中期望的参数数量是 2，但实际给出了 3 个参数。

示例代码

下面是一个示例代码，演示了这个错误的发生情况：

function add(a: number, b: number) {
  return a + b;
}

const result = add(1, 2, 3);
console.log(result);

在上面的代码中，我们定义了一个函数 add，它期望接收两个位置参数 a 和 b。然后，我们调用这个函数，并传递了三个参数。这就是导致编译时错误的原因。

解决方案

要解决这个错误，我们需要向函数传递与函数签名中定义的参数数量相匹配的参数。如果我们想要传递更多的参数，我们需要将这些参数定义为可选参数或者剩余参数。

可选参数

在 TypeScript 中，我们可以将函数参数定义为可选参数。可选参数用问号 ? 标记。如果一个参数被标记为可选参数，那么这个参数可以有一个值，也可以没有值。下面是一个示例代码：

function add(a: number, b?: number) {
  if (b) {
    return a + b;
  } else {
    return a;
  }
}

const result = add(1);
console.log(result); // 输出 1

const result2 = add(1, 2);
console.log(result2); // 输出 3

在上面的代码中，我们将参数 b 标记为了可选参数。在函数体中，我们使用了一个 if 语句来处理这个可选参数。如果 b 存在（即 b 不为 undefined），我们将 a + b 进行求和；如果 b 不存在，我们只返回 a。这样，我们就可以像这样传递参数了：

const result = add(1);
const result2 = add(1, 2);
const result3 = add(1, undefined); // 与 result2 的结果相同

剩余参数

另一种我们可以传递更多参数的方式是使用剩余参数。在 TypeScript 中，我们可以使用剩余参数语法（用三个点 ... 标记）来定义一个可以接收任意数量参数的函数参数。下面是一个示例代码：

function add(a: number, ...rest: number[]) {
  let sum = a;
  for (let i = 0; i < rest.length; i++) {
    sum += rest[i];
  }
  return sum;
}

const result = add(1, 2);
console.log(result); // 输出 3

const result2 = add(1, 2, 3);
console.log(result2); // 输出 6

const result3 = add(1, 2, 3, 4, 5);
console.log(result3); // 输出 15

在上面的代码中，我们将剩余参数 rest 定义为一个 number 类型的数组。在函数体中，我们使用一个 for 循环来遍历 rest 数组，并将它们加到 sum 变量中。这样，我们就可以像这样传递参数了：

const result = add(1, 2);
const result2 = add(1, 2, 3);
const result3 = add(1, 2, 3, 4, 5);

结论

在 TypeScript 中，函数的参数数量包括位置参数和可选参数。如果函数的参数数量与函数签名中定义的参数数量不匹配，就会抛出编译时错误。在这篇文章中，我们学习了如何解决“2 个位置参数，但给出了 3 个”这个错误。要解决这个错误，我们可以将多余的参数定义为可选参数或者剩余参数。