Typescript: How overload function in interface

Question

I want to extends a native javascript type in typescript. This is possible using an interface to declare extended properties. But how to declare overloaded properties ?

interface HTMLElement {
    add:(a:string)=>void; // error: add is duplicate
    add:(a:boolean)=>void;
}

HTMLElement.prototype.add = function (a):void{
    if(typeof a=="string"){

    }
    else if(typeof a=="boolean"){

    }
}

class HTMLElement2 {
    add(a:string):void; // ok
    add(a:boolean):void;
    add(a):void{
        if(typeof a=="string"){

        }
        else if(typeof a=="boolean"){

        }
    }
}

Thank you

Philipp Endrulat · Accepted Answer · 2016-05-20 18:41:12Z

21

You were close.

interface HTMLElement {
    add(a:string): void;
    add(a:boolean): void;
}

Tipp: I always look at the implementation from Microsoft in the lib.d.ts file. In this case I typed (with Visual Studio code): document.addEventListener and looked (with ctrl + left click) how Microsoft created the interface.

answered May 20, 2016 at 18:41

Philipp Endrulat

2262 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Baud Over a year ago

I don't know why i didn't tried that. It was obvious.

Mihail Malostanidis Over a year ago

@Baud wan't at all obvious to me, I found out by doing typeof of a concrete function.

nurgasemetey Over a year ago

Sorry, but why it works?

Keith · Accepted Answer · 2019-12-04 16:51:37Z

13

The accepted answer requires the implementation to include all of the overrides. You can also allow the interface to implement any of the overloads:

interface HTMLElement {
    add: 
        ((a:string) => void) |
        ((a:boolean) => void);
}

class HTMLElementBool {
    add(a:boolean):void{
        // Assume bool
    }
}

class HTMLElementString {
    add(a:string):void{
        // Assume str
    }
}

answered Dec 4, 2019 at 16:51

Keith

157k82 gold badges314 silver badges452 bronze badges

2 Comments

malthe Over a year ago

What would be the point of this? If you make an instance of one of these and type is as HTMLElement, the parameter becomes a: never.

Keith Jan 3 at 22:35

@malthe that's something that changed in TS, around 4.2 or 4.3 I think. I'd workaround it now with generics, but I'd have to have a play to get something that makes sense as an update to this answer.

thehale · Accepted Answer · 2024-01-29 21:51:47Z

0

For simple scenarios like yours, the TypeScript docs recommend defining the function parameter as a union of types.

Always prefer parameters with union types instead of overloads when possible

For example,

interface HTMLElement {
  add(a: string | boolean): void
}

answered Jan 29, 2024 at 21:51

thehale

2,00017 silver badges27 bronze badges

Collectives™ on Stack Overflow

Typescript: How overload function in interface

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related