How To Solve “No overload matches this call” Error In TypeScript

No overload matches this call error in TypeScript

You use overloading in TypeScript and accidentally get the “No overload matches this call” error. This article will help you answer questions related to that error.

What does “No overload matches this call” error mean?

The reason for the error

The error message: ‘No overload matches this call’ appears when you call a function with arguments that do not match its declared overloaded functions. It could be that the number of parameters is not the same or the data type is different.

Situations where the error occurs

Example 1:

// Overload signatures
function favorites(drink: string): string;
function favorites(drinks: string[]): string[];
 
// Implementation signature
function favorites(drink: unknown): unknown {
	if (typeof drink === 'string') {
    	return `I love ${drink}`;
    } else if (Array.isArray(drink)) {
      	return drink.map(d => `I love ${d}`);
    }
  
  	throw new Error('Something went wrong, please try again!');
}
 
const myDrink: unknown = 'Orange Juice';
console.log(favorites(myDrink));     // Error

Output:

error: No overload matches this call.
  Overload 1 of 2, '(drink: string): string', gave the following error.
 	Argument of type 'unknown' is not assignable to parameter of type 'string'.
  Overload 2 of 2, '(drinks: string[]): string[]', gave the following error.
 	 Argument of type 'unknown' is not assignable to parameter of type 'string[]'.

In this example, as you can see, even though the implementation function accepts an unknown type for argument, we get an error when we call a function with an argument of unknown type. The reason is that we can not execute the implementation function directly. We have to call one of the overload signatures.

Example 2:

function overloadFunc(x: number, y: number): number
function overloadFunc(x: string, y: string): string
function overloadFunc(x: any, y: any): any {
	return x + y;
}
 
function overloadFuncDemo(x: string | number, y: number | string) {
  	return overloadFunc(x, y);
}
 
console.log(overloadFuncDemo(8, 10))

Output:

No overload matches this call.
  Overload 1 of 2, '(x: number, y: number): number', gave the following error.
   	 Argument of type 'string | number' is not assignable to parameter of type 'number'.
      Type 'string' is not assignable to type 'number'.
  Overload 2 of 2, '(x: string, y: string): string', gave the following error.
      	Argument of type 'string | number' is not assignable to parameter of type 'string'.
   Type 'number' is not assignable to type 'string'.

The ‘overloadFunc’ function has two overload signatures and one implementation signature in this second example.

The first function takes two parameters of ‘number’ type and returns a number.

The second function takes two parameters of ‘string’ type and returns a string.

We have an error message in the output because the TypeScript compiler doesn’t know what type of parameter you are precisely trying to pass to the function.

Solutions to fix this error

In the case of example 1  

The way to eliminate errors is to use the correct argument’s type declared in the overload signatures. The program will be edited as follow:

// Overload signatures
function favorites(drink: string): string;
function favorites(drinks: string[]): string[];
 
// Implementation signature
function favorites(drink: unknown): unknown {
	if (typeof drink === 'string') {
      	return `I love ${drink}`;
    } else if (Array.isArray(drink)) {
      	return drink.map(d => `I love ${drink}`);
    }
 	throw new Error('Something went wrong, please try again!');
}
 
const myDrink: string = 'Orange Juice';  //use 'string' instead of 'unknown'
console.log(favorites(myDrink));     

Output:

‘I love Orange Juice’

In the case of example 2  

When the data type is not clear, you have to use type assertion by adding ‘as any’ after x and y when you call the overloadFunc() function in overloadFuncDemo() function.

function overloadFunc(x: number, y: number): number;
function overloadFunc(x: string, y: string): string;
function overloadFunc(x: any, y: any): any {
	return x + y;
}
 
function overloadFuncDemo(x: string | number, y: number | string) {
  	return overloadFunc(x as any, y as any);
}
 
console.log(overloadFuncDemo(8, 10))

Output:

18

Summary

That’s the whole point of this article. You have gone through a few error cases and their respective fixes to better understand the cause of the “No overload matches this call” error in TypeScript. Thank you for reading!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *