Borislav Hadzhiev
Sun Mar 20 2022·3 min read
Photo by Jeremy Bishop
The error "This overload signature is not compatible with its implementation signature" occurs when the implementation signature of the function is not compatible with all of its overload signatures. To solve the error, make the implementation compatible with all overload signatures.
Here is an example of how the error occurs.
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 first two lines are called the overload signatures, the third line is the function implementation.
The first overload signature takes a string
as a parameter, and the second a
number
.
string
as a parameter, so it isn't compatible with the second overload signature.To solve the error, we have to make sure the implementation signature is compatible with all of the overload signatures.
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.
Here is a complete example of a function with 2 overload signatures.
function createDate(timestamp: number): Date; function createDate(year: number, month: number, day: number): Date; function createDate( yearOrTimestamp: number, month?: number, // 👈️ mark optional day?: number, // 👈️ mark optional ): Date { if (month !== undefined && day !== undefined) { return new Date(yearOrTimestamp, month, day); } return new Date(yearOrTimestamp); } const date1 = createDate(1647474643657); console.log(date1); // 👉️ Thu Mar 17 2022 const date2 = createDate(2023, 4, 24); console.log(date2); // 👉️ Wed May 24 2023
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.
Notice that the first overload signature only takes a single parameter, whereas the second takes 3 parameters.
In this case, we have to mark the second and third parameters as optional.
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, 4);
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.
None of the overload signatures expect 2 arguments. The first overload signature
expects 1
and the second expects 3
.
You should also make sure that the return types of the overload signatures and the implementation signature are compatible.
// ⛔️ Error: This overload signature is not // compatible with its implementation signature.ts(2394) 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.
// ✅ Implementation signature compatible with Overload signatures function example(str: string): string; function example(num: number): number; function example(arg: string | number): number | string {}
Just like in the example with the createDate
function, if one of your overload
signatures takes more parameters than the others, mark them as optional in your
implementation signature.
function example(str: string): void; function example(num: number, num2: number): void; function example(strOrNum: string | number, num2?: number) {}
Now consumers of our function are able to call it with a single parameter - a
string
, which would satisfy the first overload signature.
They are also able to call it with 2
parameters of type number
, but the
function cannot be invoked with a single parameter of type number
, even though
its second parameter is marked as optional.
function example(str: string): void; function example(num: number, num2: number): void; function example(strOrNum: string | number, num2?: number) {} // ✅ OK example('hello'); // ✅ OK example(1, 2); // ⛔️ Error: The call would have succeeded against // this implementation, but implementation // signatures of overloads are not externally visible. example(1);
The implementation signature of the function cannot be called directly, you have to call one of the overload signatures.