Vérification du type d'interface dans TypeScript

1. Type Guards dans TypeScript
2. Utilisez typeof pour vérifier les types dans TypeScript
3. Utiliser instanceof dans TypeScript
4. Utilisez le mot-clé in pour vérifier les types dans TypeScript

Les interfaces sont une partie importante de TypeScript pour associer des types à des variables et des éléments dans TypeScript afin d’assurer la sécurité des types et d’éviter ainsi les erreurs d’exécution. Les classes et autres interfaces peuvent implémenter des interfaces, et ainsi cela peut être utilisé pour des comportements dynamiques dans le code réel.

Ainsi, connaître le type d’interface réel peut parfois être nécessaire pour assurer la sécurité du type, tout comme le mot-clé instanceof en Java. Ce tutoriel montrera comment les types d’interfaces peuvent être vérifiés pour assurer la sécurité des types.

Type Guards dans TypeScript

Un type guard est une vérification des différents types présents dans TypeScript pour assurer la sécurité des types. Il se présente sous la forme d’instructions conditionnelles.

Il est particulièrement nécessaire lorsqu’un certain type est une composition d’un ou plusieurs types. Différents mots-clés sont disponibles à travers lesquels les interfaces peuvent être vérifiées, telles que typeof, instanceof, in, et on peut même créer des gardes de type personnalisées.

interface Animal {
    name : string;
    legs : number;
    eyes : number;
}

interface Dog extends Animal {
    bark : () => void
}

interface Cat extends Animal {
    meow : () => void;
}

function getAnimal() : Dog | Cat {
    let choice = Math.random();
    if ( choice > 0.5){
        const dog : Dog = {
            name : 'Labrador',
            legs : 4,
            eyes : 2,
            bark : () => console.log("Woof")
        }
        return dog;
    }else {
        const cat : Cat = {
            name : 'Labrador',
            legs : 4,
            eyes : 2,
            meow : () => console.log("Meow")
        }
        return cat;
    }
}

const animal = getAnimal();
// Property 'meow' does not exist on type 'Dog | Cat'.
animal.meow();
// Property 'bark' does not exist on type 'Dog | Cat'.
animal.bark();

Dans l’exemple ci-dessus, les propriétés meow ou les fonctions bark ne peuvent pas être résolues car le compilateur TypeScript ne sait pas quoi déduire. La fonction getAnimal retourne une union de deux types, Dog | Cat, ce qui confond le compilateur.

Des gardes de type ou des vérifications de type doivent être introduites pour que le compilateur comprenne le type approprié.

if ( 'meow' in animal){
    animal.meow();
} else if ( 'bark' in animal){
    animal.bark();
}

Ce qui précède est un exemple de la façon dont les vérifications de type peuvent être appliquées pour assurer la sécurité du type. Les attributs meow et bark sont vérifiés s’ils sont présents dans l’objet animal et sont appelés en conséquence.

Utilisez typeof pour vérifier les types dans TypeScript

Le mot-clé typeof peut être utilisé pour déterminer les types de variables ; cependant, sa portée est très limitée. Il peut être utilisé pour vérifier les types primitifs.

Les valeurs retournées par le mot clé typeof peuvent être de string, number, bigint, boolean, symbol, undefined, object ou function.

Le mot-clé typeof renvoie tous les types complexes et les valeurs null sous forme d’objet.

const displayBill = ( amount : string | number ) => {
    if ( typeof amount === 'string') {
        amount = Number(amount);
    }
    let tax = (18.5 * amount) / 100;
    console.log('Bill : '+ amount + " $");
    console.log('Tax : '+ tax + " $");
    console.log('Total Payable : '+ (amount + tax) + " $");

}

displayBill(23.5);

Production:

"String conversion being done!"
"Bill : 23.5 $"
"Tax : 4.3475 $"
"Total Payable : 27.8475 $"

Ainsi dans l’exemple ci-dessus, le mot-clé typeof a été utilisé pour vérifier le type de la variable amount, et la conversion a été effectuée après la vérification. Cette vérification est nécessaire au calcul de la variable tax, qui nécessite que le amount soit de type number.

Utiliser instanceof dans TypeScript

Le mot-clé instanceof vérifie les variables correspondant à certaines classes. La protection de type suivante est utilisée pour ces variables, qui sont instanciées en tant qu’objets de classe.

class User {
    name : string;
    amountDue : number;
    constructor( name : string, amount : number){
        this.name = name;
        this.amountDue = amount;
    }
}

class UserCredit extends User {
    constructor( user : User) {
        super(user.name, user.amountDue);
    }
    generateCredit(amount : number) {
        this.amountDue += amount;
        return this.amountDue;
    }
}

class UserDebit extends User {
    constructor( user : User) {
        super(user.name, user.amountDue);
    }
    settleDebt(){
        this.amountDue = 0;
    }
}

const TransactionSystem = () => {
    const user : User = {
        name : 'Alex',
        amountDue : 0
    }
    const option = Math.random();
    if ( option > 0.5) {
        // settle debts
        const userDebt = new UserDebit(user);
        userDebt.settleDebt();
        return userDebt;
    } else {
        // increase credit
        const userCredit = new UserCredit(user);
        userCredit.generateCredit(500);
        return userCredit;
    }
}

const UserTransaction = TransactionSystem();
if ( UserTransaction instanceof UserDebit) {
    console.log('Credit balance successfully debited');
} else if (UserTransaction instanceof UserCredit) {
    console.log("Credit limit increased")
}

Utilisez le mot-clé in pour vérifier les types dans TypeScript

Le in peut être utilisé pour vérifier si un certain attribut est présent dans un type ou une interface et peut donc être utilisé avec une instruction conditionnelle comme if-else pour vérifier les types et ainsi agir et exécuter d’autres actions. Ce qui suit montre un exemple de la façon dont cela peut être réalisé.

interface Person {
    name : string;
    age : number;
}
const person : Person = {
    name : "Alex",
    age : 30
}
console.log("name" in person); // true
console.log("address" in person); // false