[TypeScript] Generic Functions, class, Type Inference and Generics

Posted 2020-10-24 Answer1215

Generic Fucntion:

For example we have a set of data and an function:

interface HasName {
    name: string;
}

const heros: HasName[] = [
    {name: ‘Jno‘},
    {name: ‘Miw‘},
    {name: ‘Ggr‘},
    {name: ‘Gew‘},
    {name: ‘Wfe‘}
];

function cloneArray(ary: any[]): any[] {
    return ary.slice(0);
}

const clones = cloneArray(heros);

When we check the ‘clones‘ type, you can see it is ‘any[]‘.

 

To add more type information we can change the function:

function cloneArray<T>(ary: T[]): T[] {
    return ary.slice(0);
}

Now we get ‘clones‘ type as ‘HasName[]‘.

 

Generic Class:

class SuperCharacter {
    constructor(public name: string) {

    }
}

class Hero extends SuperCharacter {

}

class SuperTeam {
    constructor(public members: SuperCharacter[],
        public leader: SuperCharacter
    ) {

    }
}

const captainAmerica = new Hero(‘Captain America‘);
const thor = new Hero(‘Thor‘);
const ironMan = new Hero(‘IronMan‘);

const avengers = new SuperTeam(
    [captainAmerica, thor, ironMan],
    captainAmerica
);

const members = avengers.members;

If we check ‘avengers‘ type is ‘SuperTeam‘. ‘memebers‘ type is ‘SuperCharacter[]‘.

 

To add more information to the types we can do:

class SuperTeam<T> {
    constructor(public members: T[],
        public leader: T
    ) {

    }
}

Now the ‘avengers‘ type is ‘SuperTeam<Hero>‘ and ‘members‘ type is ‘Hero[]‘.

 

Now, let‘s say we have another class:

class Villain extends SuperCharacter {

}

Have some members.

const luthor = new Villain(‘Luthor‘);
const bizarro = new Villain(‘Bizarro‘);
const captainCold = new Villain(‘Captain Cold‘);

const megaCrossoverTeam = new SuperTeam([
    captainAmerica, thor, ironMan, luthor,
    bizarro, captainCold
], captainAmerica);

‘megaCrossoverTeam‘ is type of ‘SuperTeam<Hero | Villain>‘.

 

If we want to add some restrictions to the class, we can do:

class SuperTeam<T extends SuperCharacter> {
    constructor(public members: T[],
        public leader: T
    ) {

    }
}

Then the example below will throw error:

const avengers = new SuperTeam(
    [0, 1, 2],
    0
);

Because the type is number.