Duplicate function implementation in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 20, 2022

banner

Photo from Unsplash

Duplicate function implementation in TypeScript #

The error "Duplicate function implementation" occurs when we define an implementation for a function with the same name multiple times in the same file. To solve the error, rename the second function or use overloads by specifying multiple signatures, not multiple implementations.

duplicate function implementation

Here is an example of how the error occurs.

index.ts
function sum() {} // ⛔️ Error: Duplicate function implementation.ts(2393) function sum() {}

We defined a function named sum twice in the same file and got the error. This also happens with class methods - a class cannot have multiple methods with the same name.

If this is the cause of the error in your case, give the second function another name.

Another cause of the error is having a glitch due to legacy script files. If you only have a single definition for the function in the file, add the export {} line to your file to make it an ES Module.

index.ts
function sum() {} export {}; // 👈️ make file ES Module

In short, this sometimes glitches, because of how legacy script files globalize declarations.

Another common cause of the error is trying to use function overloads, but mistakenly providing multiple implementations instead of multiple signatures for the function.

The syntax for function overloads looks something like:

index.ts
function reverse(a: string): string; function reverse(a: string[]): string[]; function reverse(a: string | string[]): string | string[] { // your implementation }

Notice that we only use curly braces {} when specifying the function implementation.

If you add curly braces on multiple lines, you are declaring multiple implementations for the same function, which causes the error.

We basically supply multiple function types for the same function, but there is only one implementation of the function.

Here is a complete example of a function with 2 overload signatures.

index.ts
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); } 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.

Note that the implementation signature of the function cannot be called directly, you have to call one of the overload signatures.
index.ts
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.

None of the overload signatures expect 2 arguments. The first overload signature expects 1 and the second expects 3.

When writing your function implementation, make sure it is compatible with the overload signatures.

index.ts
function example(str: string): void; // ⛔️ Error: This overload signature is not // compatible with its implementation signature. function example(num: number): void; function example(arg: string) {}

The implementation signature takes a parameter of type string, but the second overload signature takes a parameter of type number.

The implementation signature has to be compatible with all overload signatures.

index.ts
function example(str: string): void; function example(num: number): void; function example(arg: string | number) {}

Now the parameter in the implementation signature has a compatible type with all of the overload signatures.

If one of your overload signatures takes more parameters than the others, mark them as optional in your implementation signature.

index.ts
function example(str: string): void; function example(num: number, num2: number): void; function example(arg: string | number, num2?: number) {}

You should also make sure that the return types of the overload signatures and the implementation signature are compatible.

index.ts
// ⛔️ Error function example(str: string): string; function example(num: number): number; function example(arg: string | number): number {}

Notice that the first overload signature has a return type of string, and the second has a return type of number.

The implementation signature cannot have a return type of number, because it is not compatible with the first overload signature.

index.ts
// ✅ Implementation signature compatible with Overload signatures function example(str: string): string; function example(num: number): number; function example(arg: string | number): number | string {}

Conclusion #

The error "Duplicate function implementation" occurs when we define an implementation for a function with the same name multiple times in the same file. To solve the error, rename the second function or use overloads by specifying multiple signatures, not multiple implementations.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.