Matthew C.
—When calling a TypeScript function, you may get the following error:
No overload matches this call.
This error occurs when a function or method is called with arguments that don’t match any of the function’s overload signatures.
Ensure that the arguments and types of your function call match one of the function’s overload signatures.
In TypeScript, you can use overload signatures to specify a function that can be called with a variable number of arguments, argument types, and return types.
Each overload signature defines the parameter and return types of the function. They don’t have a function body. You also need to define an implementation signature that has a function body. The types of the implementation signature functions should match all of the types of the overload signatures.
// Overload signatures function combine(a: string, b: string): string; function combine(a: string[], b: string[]): string[]; // Implementation signature function combine(a: unknown, b: unknown): unknown { if (Array.isArray(a) && Array.isArray(b)) { return [...a, ...b]; } else if (typeof a === "string" && typeof b === "string") { return a + b; } throw new Error("Invalid arguments"); }
When calling the function, call it using the types of one of the overload signatures. If you call the function using arguments that don’t match one of the overload signatures, you’ll get the No overload matches this call
error.
For example, you could call the combine
function, defined above, with a number as its first argument, as follows:
console.log(combine(1 , "world!"));
If you called the function above, you would get the following error:
No overload matches this call. Overload 1 of 2, '(a: string, b: string): string', gave the following error. Argument of type 'number' is not assignable to parameter of type 'string'. Overload 2 of 2, '(a: string[], b: string[]): string[]', gave the following error. Argument of type 'number' is not assignable to parameter of type 'string[]'.(2769)
If, however, you called the combine
function with two “string” arguments of the type “string”, you wouldn’t get any errors:
console.log(combine("Hello, ", "world!"));
Function overloads should only be used when the function signature is complex:
function combine( a: string | string[], b: string | string[] ): string | string[] { if (Array.isArray(a) && Array.isArray(b)) { return [...a, ...b]; } else if (typeof a === "string" && typeof b === "string") { return a + b; } throw new Error("Invalid arguments"); }
You should rather use union types when possible.
You can see live demos of the examples in the TypeScript Playground:
To learn more about function overloads, take a look at the TypeScript docs.
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODESConsidered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.
Here’s a quick look at how Sentry handles your personal information (PII).
×We collect PII about people browsing our website, users of the Sentry service, prospective customers, and people who otherwise interact with us.
What if my PII is included in data sent to Sentry by a Sentry customer (e.g., someone using Sentry to monitor their app)? In this case you have to contact the Sentry customer (e.g., the maker of the app). We do not control the data that is sent to us through the Sentry service for the purposes of application monitoring.
Am I included?We may disclose your PII to the following type of recipients:
You may have the following rights related to your PII:
If you have any questions or concerns about your privacy at Sentry, please email us at compliance@sentry.io.
If you are a California resident, see our Supplemental notice.