typescript overload method with arrow function

Question

anyone know how to use method overload on arrow function?

foo(args: string): string
    foo(args: number): number
    foo(args: string | number): string | number {
        if (typeof args === "string") {
            return "string"
        }
        return 1
    }

tried this but not working

foo: {
    (args: string): string;
    (args: number): number;
} = (args: string | number): string | number => {
    if (typeof args === "string") {
      return "string"
    }
    return 1
}

It can actually support overloading. see stackoverflow.com/questions/20646171/… — AozakiOrenji
– AozakiOrenji, Commented Sep 29, 2019 at 13:03
You can actually overloading an arrow function. see stackoverflow.com/questions/20646171/… — AozakiOrenji
– AozakiOrenji, Commented Sep 29, 2019 at 13:05

dalyIsaac · Accepted Answer · 2020-12-08 01:07:38Z

8

Arrow functions don't support overloading. From the language specification:

The descriptions of function declarations provided in chapter 6 apply to arrow functions as well, except that arrow functions do not support overloading.

When you write

foo: {
  (args: string): string;
  (args: number): number;
}

then you don't overload. You actually say that foo is a function that can take one of these forms (or rather both forms). The arrow function

(args: string | number): string | number =>

violates that restriction because it's a single function (not an overloaded one) and string | number means that you can return a number when a string is expected.

As already proposed by artem changing the return type to any or an intersection type solves the problem. But it's not the same as overloading because the compiler doesn't chose between the signatures. You effectively only have one: That of the arrow function.

edited Dec 8, 2020 at 1:07

dalyIsaac

7301 gold badge8 silver badges17 bronze badges

answered Jun 8, 2018 at 9:45

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

2 Comments

artem Over a year ago

but that callable signature for foo works the same way as overload - when you call it with string, the compiler infers the return type as string, and when you call it with number, the return type is number.

a better oliver Over a year ago

@artem Like an observer effect: If you declare it it's string & number but if you use it it's string or number ;) Unfortunately this construct and its implications are not explained in the specification. But yes: The effect is the same.

artem · Accepted Answer · 2018-06-08 03:36:25Z

For reasons I don't fully understand, the return type of the implementation is expected to be intersection, not union:

class B {
    foo: {
        (args: string): string;
        (args: number): number;
    } = (args: string | number): string & number => {
        if (typeof args === "string") {
            return "string" as string & number;
        }
        return 1 as string & number;
    }    
}

So it's no better than just declaring the implementation to return any, as they do in documentation examples:

class B {
    foo: {
        (args: string): string;
        (args: number): number;
    } = (args: string | number): any => {
        if (typeof args === "string") {
            return "string";
        }
        return 1;
    }    
}

Collectives™ on Stack Overflow

typescript overload method with arrow function

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related