No overload matches this call error in TypeScript [已解决]

No overload matches this call error in TypeScript

当我们调用一个函数并向它传递一个与其指定的任何重载都不匹配的参数时，就会出现错误“没有重载匹配此调用”。

要解决该错误，请确保使用正确类型的正确数量的参数调用函数，或者使用类型断言。

没有过载匹配此调用

下面是错误如何发生的示例。

索引.ts


// ⛔️ Error: No overload matches this call.
// Overload 1 of 3, ...
const result1 = ['a', 'b', 'c'].reduce((accumulator: any) => {}, []);

指定正确数量的参数

在示例中，我们在回调中仅采用 1 个参数，但它需要最少的2参数。

要解决该错误，请在函数定义中指定正确数量的参数。

索引.ts


const result1 = [
  'a', 'b', 'c'
].reduce((accumulator: any, current) => {}, []);
//                          👆️ define the second parameter

在我们传递给的回调函数中指定 2 个参数Array.reduce()
解决了这个问题，因为回调函数必须至少采用 2 个参数。

确保将正确数量的参数传递给正在调用的函数。

解决 TypeScript 的局限性

这是错误如何发生的另一个示例。

索引.ts


function example(str: 'hello'): string;
function example(str: 'world'): string;
function example(str: 'hello' | 'world'): string {
  return str;
}

function callExample(str: 'hello' | 'world') {
  // ⛔️ Error: No overload matches this call.
  // Overload 1 of 2 gave the following error.
  // Argument of type '"hello" | "world"' is
  // not assignable to parameter of type '"hello"'.
  return example(str);
}

TypeScript 对我们调用函数的值的类型感到困惑。

这是一个有效的函数调用，但是编译器有限制，所以我们必须在调用函数时使用类型断言example。

索引.ts


function example(str: 'hello'): string;
function example(str: 'world'): string;
function example(str: 'hello' | 'world'): string {
  return str;
}

function callExample(str: 'hello' | 'world') {
  return example(str as any); // 👈️ use type assertion
}

该as any语法称为
类型断言
，可以有效地关闭特定参数的类型检查。

如果即使在使用语法后仍出现错误as any，很可能是您的函数采用的参数数量与您指定的参数数量不同。尝试使用您的 IDE 来查看该函数需要多少个参数。

理解错误发生的原因

如果上述建议没有帮助，解决错误的最佳方法是了解其原因。

当从第三方库或您自己定义的库中调用具有重载的函数时，您可能会遇到错误，但以下内容适用于任何一种方式。

这是一个具有 2 个重载的函数示例。

索引.ts


function createDate(timestamp: number): Date; // 👈️ overload
function createDate(year: number, month: number, day: number): Date; // 👈️ overload
function createDate( // 👈️ implementation
  yearOrTimestamp: number,
  month?: number,
  day?: number,
): Date {
  if (month !== undefined && day !== undefined) {
    return new Date(yearOrTimestamp, month, day);
  }

  return new Date(yearOrTimestamp);
}

const date1 = createDate(1647778643657);
console.log(date1); // 👉️ Sun Mar 20 2022

const date2 = createDate(2023, 9, 24);
console.log(date2); // 👉️ Tue Oct 24 2023

前两行称为重载签名，第三行是函数实现。

构造函数Date()可以传递不同的参数来创建一个Date
对象。

In the first signature, the function takes a timestamp (number) parameter and
returns a Date object.

In the second signature, the function takes 3 comma-separated parameters of type
number and returns a Date object.

The implementation signature cannot be called directly #

IMPORTANT: Note that the implementation signature of the function cannot be
called directly. You have to call one of the overload signatures.

index.ts


function createDate(timestamp: number): Date;
function createDate(year: number, month: number, day: number): Date;
function createDate(
  yearOrTimestamp: number,
  month?: number,
  day?: number,
): Date {
  if (month !== undefined && day !== undefined) {
    return new Date(yearOrTimestamp, month, day);
  }

  return new Date(yearOrTimestamp);
}

// ⛔️ Error: No overload expects 2 arguments,
// but overloads do exist that expect either 1 or 3 arguments.ts(2575)
const date3 = createDate(2023, 9);

Even though the line where we call the createDate function satisfies its
implementation signature, because the function has 2 optional parameters, we get
an error.

The implementation signature of the function cannot be called directly. You have to call one of the overload signatures.

Check the type definitions of the function #

If you got the error when calling a function from a third-party module, open its
type definitions.

For example, in VSCode you can do that by pressing the ALT key and clicking on
the function’s name with your mouse.

Now look at the overload signatures of the function – you can only call one of
the function’s overload signatures, not its implementation signature.

index.ts


function example(str: string): void; // 👈️ overload
function example(num: number, num2: number): void; // 👈️ overload
function example(strOrNum: string | number, num2?: number) {} // 👈️ implementation

// ✅ OK
example('bobbyhadz.com');

// ✅ OK
example(1, 2);

// ⛔️ Error: The call would have succeeded against
// this implementation, but implementation
// signatures of overloads are not externally visible.
example(1);

The example function can be called with a single argument of type string
because this satisfies the first overload signature.

The function can also be called with 2 arguments of type number, which
satisfies the second overload signature.

But the function cannot be called with a single argument of type number, even though its second parameter is marked as optional.

不能直接调用函数的实现签名，您必须调用其中一个重载签名。