[TypeScript] Using Interfaces to Describe Types in TypeScript

Posted 2020-08-14 Answer1215

It’s easy to pass the wrong value to a function. Typescript interfaces are great because they catch errors at compile time or in an IDE. In this lesson we’ll learn how to describe a type shape with Typescript interfaces.

 

Using interface to describe an object:

interface ComicBookCharacter {
    secretIdentity?: string;
    alias: string;
    health: number;
}

let superHero: ComicBookCharacter = {
    alias: ‘Zero‘,
    health: 8700
};
let superVillain: ComicBookCharacter = {
    secretIdentity: "YuLong",
    alias: "YuLong",
    health: 9150
};

function getSecretIdentity(character: ComicBookCharacter){
    if(character.secretIdentity){
        console.log(`${character.alias} is ${character.secretIdentity}`);
    } else {
        console.log(`${character.alias} has no secret identity`);
    }
}

getSecretIdentity(superHero);

 

Using interface to describe an function:

interface AttackFunction {
    (opponent: {alias: string; health: number}, attackWith: number): number;
}

interface ComicBookCharacter {
    secretIdentity?: string;
    alias: string;
    health: number;
}

function attackFunc(opponent, attackWith){
    opponent.health -= attackWith;
    console.log(`${this.alias} attacked ${opponent.alias}, who‘s health = ${opponent.health}`);
    return opponent.health;
}

let superHero: ComicBookCharacter = {
    alias: ‘Zero‘,
    health: 9000,
    strength: 5000,
    attack: attackFunc
};

 

Using extends:

interface OptionalAttributes {
    strength?: number;
    insanity?: number;
    dexterity?: number;
    healingFactor?: number;
}

interface ComicBookCharacter extends OptionalAttributes{
    secretIdentity?: string;
    alias: string;
    health: number;
    attack: AttackFunction;
}

 

Code:

interface AttackFunction {
    (opponent: {alias: string; health: number}, attackWith: number): number;
}

interface KrustyTheClown {
    alias: string;
    health: number;
    inebriationLevel: number;
    attack: AttackFunction;
}

interface OptionalAttributes {
    strength?: number;
    insanity?: number;
    dexterity?: number;
    healingFactor?: number;
}

interface ComicBookCharacter extends OptionalAttributes{
    secretIdentity?: string;
    alias: string;
    health: number;
    attack: AttackFunction;
}

function attackFunc(opponent, attackWith){
    opponent.health -= attackWith;
    console.log(`${this.alias} attacked ${opponent.alias}, who‘s health = ${opponent.health}`);
    return opponent.health;
}

let superHero: ComicBookCharacter = {
    alias: ‘Zero‘,
    health: 9000,
    strength: 5000,
    attack: attackFunc
};
let superVillain: ComicBookCharacter = {
    secretIdentity: "YuLong",
    alias: "YuLong",
    health: 7600,
    insanity: 200,
    attack: attackFunc
};

function getSecretIdentity(character: ComicBookCharacter){
    if(character.secretIdentity){
        console.log(`${character.alias} is ${character.secretIdentity}`);
    } else {
        console.log(`${character.alias} has no secret identity`);
    }
}

superHero.attack(superVillain, superHero.strength); //"Zero attacked YuLong, who‘s health = 2600"