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

score 19 · Accepted Answer · answered May 20 '16 at 18:41

19

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 '16 at 18:41

Philipp Endrulat

206
2
4

I don't know why i didn't tried that. It was obvious. – Baud May 20 '16 at 20:45
@Baud wan't at all obvious to me, I found out by doing `typeof` of a concrete function. – Mihail Malostanidis Sep 01 '18 at 22:12

score 11 · Answer 2 · answered Dec 04 '19 at 16:51

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
    }
}

Typescript: How overload function in interface

2 Answers2

Linked