Comprobación de tipo de interfaz en TypeScript

Shuvayan Ghosh Dastidar 18 agosto 2022
  1. Guardias de tipo en TypeScript
  2. Use typeof para verificar tipos en TypeScript
  3. Uso de instanceof en TypeScript
  4. Utilice la palabra clave in para buscar tipos en TypeScript
Comprobación de tipo de interfaz en TypeScript

Las interfaces son una parte importante de TypeScript para asociar tipos a variables y elementos en TypeScript para garantizar la seguridad de los tipos y, por lo tanto, evitar errores de tiempo de ejecución. Las clases y otras interfaces pueden implementar interfaces y, por lo tanto, esto se puede usar para comportamientos dinámicos en el código real.

Por lo tanto, a veces puede ser necesario conocer el tipo de interfaz real para garantizar la seguridad del tipo, al igual que la palabra clave instanceof en Java. Este tutorial demostrará cómo se pueden verificar los tipos de interfaces para garantizar la seguridad de tipos.

Guardias de tipo en TypeScript

Una protección de tipos es una verificación de los diferentes tipos presentes en TypeScript para garantizar la seguridad de los tipos. Es en forma de sentencias condicionales.

Es especialmente necesario cuando un cierto tipo es una composición de uno o más tipos. Hay varias palabras clave disponibles a través de las cuales se pueden verificar las interfaces, como typeof, instanceof, in, e incluso se pueden hacer guardias de tipo personalizadas.

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();

En el ejemplo anterior, las propiedades meow o las funciones bark no se pueden resolver porque el compilador de TypeScript no está seguro de qué inferir. La función getAnimal devuelve una unión de dos tipos, Dog | Cat, lo que confunde al compilador.

Se deben introducir protecciones de tipo o comprobaciones de tipo para que el compilador entienda el tipo apropiado.

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

Lo anterior es un ejemplo de cómo se pueden hacer cumplir las verificaciones de tipos para garantizar la seguridad de los tipos. Los atributos meow y bark se comprueban si están presentes en el objeto animal y se llaman en consecuencia.

Use typeof para verificar tipos en TypeScript

La palabra clave typeof se puede utilizar para determinar los tipos de variables; sin embargo, tiene un alcance muy limitado. Se puede utilizar para comprobar tipos primitivos.

Los valores devueltos por la palabra clave typeof pueden ser de tipo string, number, bigint, boolean, symbol, undefined, object o function.

La palabra clave typeof devuelve todos los tipos complejos y valores null como un objeto.

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);

Producción :

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

Así, en el ejemplo anterior, la palabra clave typeof se ha utilizado para comprobar el tipo de la variable amount, y la conversión se ha realizado después de la comprobación. Esta comprobación es necesaria para el cálculo de la variable tax, que requiere que el amount sea del tipo number.

Uso de instanceof en TypeScript

La palabra clave instanceof comprueba las variables correspondientes a algunas clases. La siguiente protección de tipo se utiliza para esas variables, que se instancian como objetos de clase.

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")
}

Utilice la palabra clave in para buscar tipos en TypeScript

El in se puede usar para verificar si un determinado atributo está presente en un tipo o una interfaz y, por lo tanto, se puede usar con una declaración condicional como if-else para verificar los tipos y, por lo tanto, actuar y ejecutar más acciones. A continuación se muestra un ejemplo de cómo se puede lograr esto.

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
Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

Artículo relacionado - TypeScript Interface