Typescript overload functions don't autocomplete correctly in IDE

Question

I've been trying to make function overloads so my IDE could autocomplete the second paramater's type correctly based on the first argument's value. See example below:

class Animal {
    constructor(private name: string) { }

    bark(key: 'said', data: {
        text: string;
    }): void;
    bark(key: 'barked', data: {
        times: number;
    }): void;
    bark(key: 'said' | 'barked', data: any): void {
        if (key === 'said') console.log(`${this.name} said ${data}`);
        if (key === 'barked') for (let i = 0; i < data; i++) console.log('BARK!');
    }
}

const barry = new Animal('Barry');
barry.bark('barked', {
    /* Should auto-complete to { times: number } */
})

However the IDE autocompletes to both types for 'barked' and 'said'. See following example executed on Typescript sandbox

Am I typing it incorrectly? Or perhaps expecting something that is not supported? Thanks!

Do your doubt it is about if I use certain param like cake the second would need to be milk? It is an example — Vagner Wentz
– Vagner Wentz, Commented Aug 21, 2020 at 22:20
@VagnerWentz Pretty much, I'm strong typing that function so depending on the first parameter's value (say cake), the IDE should know the second parameter expects a type based on cake and autocompletes it accordingly. — Victor Monteiro Cunha
– Victor Monteiro Cunha, Commented Aug 21, 2020 at 23:27

Mahdi Ghajary · Accepted Answer · 2020-08-22 12:27:23Z

2

Great question. it seems Typescript is unable to infer the narrowest type (from the first parameter) when working with overloads.

One way to achieve what you want is by using Generics. here is how it can be done in your case:

type Type1 = {text: string}
type Type2 = {times: number}

class Animal {
    constructor(private name: string) { }

    bark<Key extends "said" | "barked", Data extends (Key extends "said" ? Type1 : Type2)>
    (key: Key, data: Data) : void;
    bark(key: any, data: any): any {
        if (key === 'said') console.log(`${this.name} said ${data}`);
        if (key === 'barked') for (let i = 0; i < data; i++) console.log('BARK!');
    }
} 

    
 const barry = new Animal('Barry');
 barry.bark("barked", {times: 5})

Although this works fine in your case, but it's not quite straightforward.

answered Aug 22, 2020 at 12:27

Mahdi Ghajary

3,2631 gold badge19 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

Typescript overload functions don't autocomplete correctly in IDE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related