Can I use TypeScript overloads when using fat arrow syntax for class methods?

Question

I've converted some classes from the conventional form:

class TestOverloads {
    private status = "blah";
    public doStuff(selector: JQuery);
    public doStuff(selector: string);
    public doStuff(selector: any) {
        alert(this.status);
    }
}

to use arrow function expressions instead:

class TestOverloads2 {
    private status = "blah";
    public doStuff = (selector: any) => {
        alert(this.status);
    }
}

so as to avoid scoping problems when the class methods are used in a callback (see here for background).

I can't work out how to recreate my overloaded function signatures though. How would I write my overloads when using the fat arrow?

Do not use fat arrow for methods. It will become a property of the class, not a prototype method. — garkin
– garkin, Commented Aug 17, 2015 at 8:42

Ryan Cavanaugh · Accepted Answer · 2013-12-17 23:27:56Z

47

You can write an inline type literal for the call signatures the function supports:

class TestOverloads2 {
    private status = "blah";
    public doStuff: {
        (selector: JQuery): void;
        (selector: string): void;
    } = (selector: any) => {
        alert(this.status);
    }
}

That's sort of hideous, so you might want to extract it into an interface instead:

interface SelectByJQueryOrString {
    (selector: JQuery): void;
    (selector: string): void;
}

class TestOverloads3 {
    private status = "blah";
    public doStuff: SelectByJQueryOrString = (selector: any) => {
        alert(this.status);
    }
}

answered Dec 17, 2013 at 23:27

Ryan Cavanaugh

223k59 gold badges280 silver badges235 bronze badges

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

4 Comments

Fenton Over a year ago

The interface type annotation is a great idea.

user4275029 Over a year ago

Note: In learning about this, I came across this TS Dos and Donts: typescriptlang.org/docs/handbook/declaration-files/… At the bottom of the page in the Use Union Types section, it mentions using unions for single-position overloads. So in this example, it would be selector: JQuery|string): void for the definition. I am wondering tho, should the actual instance also be a union instead of any? - ... = (selector: JQuery|string) => { alert...

Josh Over a year ago

If I try this syntax, without named interface properties, it throws an error in the implementing class saying it incorrectly implements the interface (no signature match).

Christian Jensen Over a year ago

As @user4275029 mentions, you should use a union. But to be clear: you should use a union INSTEAD OF an overload. So delete the overload and do public doStuff = (selector: JQuery | string) => {...}

Fenton · Accepted Answer · 2013-12-17 23:19:04Z

3

It is a bit of a technicality, but you are no longer creating a function, you are creating a property (that happens to be a function).

You could solve your problem using naming rather than overloading though.

class TestOverloads2 {
    private status = "blah";
    public doStuffWithSelector = (selector: string) => {
        alert(this.status);
    }
    public doStuffWithJqueryObject = (jqo: JQuery) => {
        alert(this.status);
    }
}

If there is significant duplication, you can put that in a common function that both named functions call, for example: this.sharedStuff().

answered Dec 17, 2013 at 23:19

Fenton

253k74 gold badges404 silver badges414 bronze badges

Collectives™ on Stack Overflow

Can I use TypeScript overloads when using fat arrow syntax for class methods?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related