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?

Answer 1

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

Answer 2

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