Inconsistency in TypeScript function overload

Question

Consider this example:

export function fn(arg: string): void;
export function fn(arg: number): void;
export function fn(arg: any) {
    console.log(arg);
}

So, fn can be called either with a string, or a number.

fn('hello!');
fn(42);

So far, so good. But then fn is executed in a different place:

function fn2(arg2: string | number) {
    fn(arg2);
}

In this case TypeScript complains:

No overload matches this call. Overload 1 of 2, '(arg: string): void', gave the following error.

Argument of type 'string | number' is not assignable to parameter of type 'string'.
  Type 'number' is not assignable to type 'string'.   Overload 2 of 2, '(arg: number): void', gave the following error.
Argument of type 'string | number' is not assignable to parameter of type 'number'.
  Type 'string' is not assignable to type 'number'.ts(2769)

index.tsx(3, 17): The call would have succeeded against this implementation, but implementation signatures of overloads are not externally visible.

Can someone help me understand what's going on here?

user16238654 · Accepted Answer · 2021-09-28 15:43:14Z

2

You can add another overload

export function fn(arg: string): void;
export function fn(arg: number): void;
export function fn(arg: any): void;
export function fn(arg: any) {
    console.log(arg);
}

fn('hello!');
fn(42);

function fn2(arg2: string | number) {
    fn(arg2);
}

Playground

answered Sep 28, 2021 at 15:43

user16238654

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

6 Comments

Elliot Huffman Over a year ago

This fixed it for me but I have no idea why. Can you explain why this fixed it for me?

user16238654 Over a year ago

@ElliotLabsLLC Because the new overload signature accepts an argument of type any.

user16238654 Over a year ago

It just covers anything including union types which in this case would be arg2: string | number

Elliot Huffman Over a year ago

got ya, so why couldn't the base function handle it? Why does it have to be an additional overload?

user16238654 Over a year ago

Because there was no overload declared for the union and as far as typescript cares, number or string can be assigned to number | string but not vice versa

|

Felix · Accepted Answer · 2021-09-28 15:46:07Z

Overloads aren't the same as Union Types. Overloads define 'separate' functions while unions allow you to put different types as arguments.

// fails
function fn2(arg2: string | number) {

    fn(arg2); // uses the union type
}

// works 
function fn3(arg2: string | number) {
    
    if(typeof arg2  === 'string') {
        return fn(arg2); // uses string
    }
    
    return fn(arg2); // uses number
}

This means fn2 searches for a function declaration that has an argument of type string|number while fn3 searches for either a function with type string or a function with type number as its first argument.

You should not use any if you exactly know, which type you want as a function parameter.

See the documentation for Union Types

Collectives™ on Stack Overflow

Inconsistency in TypeScript function overload

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related