No overload matches this call error in TypeScript

We know that TypeScript is a type of programming language that helps us write better code by catching errors before we even run the program. One common error that can happen in TypeScript is when we try to use a function in a way that it wasn’t designed to be used.

Why the error occurs ?

Let’s assume you have a Badminton racket that is designed to be played with shuttle. If you try to play it with tennis ball, it might break or damage the racket. The same thing can happen with functions in TypeScript.

So when TypeScript gives you an error that says “No overload matches this call”, it means that you’re trying to use a function in a way that it wasn’t designed to be used. TypeScript is just letting you know that you need to use the function differently, or find a different function that works better for what you’re trying to do.

Example :

const numbers = [1, 2, 3, 4, 5];

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

How to fix the error ?

The reduce() method takes two parameters: first, an accumulator, which holds the accumulated value, and second the current element in the array being processed. In above example, the reduce function is only taking one parameter, accumulator. Additionally, the second argument passed to reduce() is an empty array, which is invalid because it should be an initial value for the accumulator.

To fix the error, you should pass two parameters , and provide an initial value for the accumulator.

For example:

const numbers = [1, 2, 3, 4, 5];

const sum = numbers.reduce((accumulator:any, currentValue) => accumulator + currentValue, 0);                            

console.log(sum); // Output: 15

I hope it helped you fix the error.