When working with TypeScript, you might come across the Error: No overload matches this call. You shouldn’t panic in this situation. Keep reading this guide to find out why this error appears and how to fix it.

TypeScript Error: No overload matches this call – Cause And Solution

The TypeScript Error: No overload matches this call appears when you call a function and send it an argument that does not match any of the listed overloads.

Here is an example of how this error appears in the file of middleware.

import { Request, Response, NextFunction } from 'express';

const isLoggedIn = (req: Request, res: Response, next: NextFunction) => {

    if (!req.isAuthenticated()) {

        return res.status(401).json({

            error: "User must sign in"

          })

    }

    next();

}

export default {

    isLoggedIn

}

In this case, our middleware file exports were configured improperly. We create a new object with just one property – the handler feature, isLoggedIn – and export it using the default setting. As a result, when we import the file’s default export, it will say:

import isLoggedIn from '@middleware/user';

isLoggedIn is now equivalent to the default export’s value. This means the handler function is equivalent to the object’s isLoggedIn property. Thus, rather than passing a feature to route(‘/’).get(…) as it expects, we pass it a different object.

As an alternative, we can utilize the export from the middleware file:

export const isLoggedIn = (...) => ...;

Import it next:

import {isLoggedIn} from '@middleware/user';

Here is another example.

function len(s: string): number;

function len(arr: any[]): number;

function len(x: any) {

 return x.length;

}

We can use arrays or strings to call this function, which works perfectly. As the TypeScript programming language may only resolve a single function call to one overload, we are unable to call it with a value that could be either a string or an array:

len(""); // OK

len([0]); // OK

len(Math.random() > 0.5 ? "hello" : [0]);

No overload matches this call.

  Overload 1 of 2, '(s: string): number', gave the following error.

    Argument of type 'number[] | "hello"' is not assignable to parameter of type 'string'.

      Type 'number[]' is not assignable to type 'string'.

  Overload 2 of 2, '(arr: any[]): number', gave the following error.

    Argument of type 'number[] | "hello"' is not assignable to parameter of type 'any[]'.

      Type 'string' is not assignable to type 'any[]'.

The function can also be written without overloading as both versions have the same number of arguments and return type.

function len(x: any[] | string) {

 return x.length;

}

Callers can use either type of value to invoke this, and we are not required to determine the ideal implementation signature as an additional advantage.

Notice that when possible, always choose union type arguments over overloads.

The Bottom Line

Now you understand what causes TypeScript Error: No overload matches this call and how to fix it. After reading our guide, you won’t have to worry about this error anymore.Bonus: We also have a solution for fixing Object is possibly undefined, another common error in TypeScript. Check out our guide if you face this issue.