Solve - No overload matches this call error in TypeScript

Solve - No overload matches this call error in TypeScript #

The error "No overload matches this call" occurs when we call a function and pass it a parameter that doesn't match any of its specified overloads. To solve the error, make sure the function is being called with the correct number of arguments of the correct type, or use a type assertion.

no overload matches this call

Here are 2 examples of how the error occurs.

index.ts

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

// ------------------------------------
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);
}

In the first example, we take only 1 parameter in the callback, but it expects a minimum of 2 parameters.

To solve the error in this scenario, we have to define the correct number of parameters in the function.

index.ts

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

Make sure you are passing the correct number of parameters to the function you are calling.

In the second example, TypeScript gets confused about the type of value we call the function with.

index.ts

Copied!
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);
}

This is a valid function call, but the compiler has limitations, so we have to use a type assertion when calling the example function.

index.ts

Copied!
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
}

The as any syntax is called a type assertion and effectively turns off type checking for the specific parameter.

If you are getting the error even after using the as any syntax, it's very likely your function takes a different number of arguments than you have specified. Try to use your IDE to see how many arguments the function takes.

If the suggestions above did not help, the best way to solve the error is to understand its cause.

You might be getting the error when calling a function with overloads from a third party library or one that you have defined yourself, but the following applies either way.

Here is an example of a function that has 2 overloads:

index.ts

Copied!
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

The first two lines are called the overload signatures, the third line is the function implementation.

The Date() constructor can be passed different parameters to create a Date object.

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.

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

index.ts

Copied!
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.

If you are getting 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

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

// ✅ OK
example('hello');

// ✅ 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 above can be called with a single parameter of type string, which satisfies the first overload signature.

The function can also be called with 2 parameters of type number, which would satisfy the second overload signature.

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

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

Solve - No overload matches this call error in TypeScript

Solve - No overload matches this call error in TypeScript #

Borislav Hadzhiev