TypeScript Academy · Lección

Protectores de tipos

Trabaje de forma segura con tipos unknown o any mediante protectores de tipos

Protectores de tipos es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Introducción a las guardas de tipo

Guardas de tipo

¡Bienvenido a la siguiente lección! En esta lección, aprenderá sobre las guardas de tipo, una potente característica de TypeScript que permite restringir los tipos durante la ejecución. Las guardas de tipo garantizan la seguridad de tipos del código y ayudan a evitar errores. ¡Comencemos!

¿Qué son las guardas de tipo?

Una guarda de tipo es una función o construcción que determina el tipo de una variable durante la ejecución. Permite a TypeScript restringir el tipo de una variable dentro de un bloque específico de código.

Ejemplo:

Tarea: Escriba una función que use una guarda de tipo para comprobar si un valor es un número.

function isString(value: unknown): boolean {
  return typeof value === "string";
}

function printLength(value: unknown): void {
  if (isString(value)) {
    console.log(value.length); 
// TypeScript knows 'value' is a string here
  } else {
    console.log("Value is not a string");
  }
}

printLength("Hello"); 
// Output: 5
printLength(42); 
// Output: Value is not a string

Uso de typeof para valores primitivos

Uso de `typeof` para valores primitivos

Puede usar el operador typeof para comprobar el tipo de valores primitivos, como cadenas, números y valores booleanos.

Ejemplo:

Tarea: Use typeof para distinguir entre una cadena y un número en una función.

function printValue(value: string | number): void {
  if (typeof value === "string") {
    console.log(`String value: ${value}`);
  } else {
    console.log(`Number value: ${value}`);
  }
}

printValue("Hello"); 
// Output: String value: Hello
printValue(42); 
// Output: Number value: 42

Uso de instanceof para clases

Uso de `instanceof` para clases

El operador instanceof comprueba si un objeto es una instancia de una clase específica. Ejemplo:

Tarea: Use instanceof para gestionar distintas instancias de clase en una función.

class Dog {
  bark(): void {
    console.log("Woof!");
  }
}

class Cat {
  meow(): void {
    console.log("Meow!");
  }
}

function makeSound(animal: Dog | Cat): void {
  if (animal instanceof Dog) {
    animal.bark();
  } else {
    animal.meow();
  }
}

let dog = new Dog();
let cat = new Cat();
makeSound(dog); 
// Output: Woof!
makeSound(cat); 
// Output: Meow!

Uso de guardas de tipo personalizadas

Puede crear funciones de guarda de tipo personalizadas mediante un tipo de retorno value is Type. Ejemplo:

interface Car {
  make: string;
  model: string;
}

interface Bike {
  brand: string;
  type: string;
}

function isCar(vehicle: Car | Bike): vehicle is Car {
  return (vehicle as Car).make !== undefined;
}

function printVehicle(vehicle: Car | Bike): void {
  if (isCar(vehicle)) {
    console.log(`Car: ${vehicle.make} ${vehicle.model}`);
  } else {
    console.log(`Bike: ${vehicle.brand} ${vehicle.type}`);
  }
}

let car: Car = { make: "Toyota", model: "Corolla" };
let bike: Bike = { brand: "Yamaha", type: "Sport" };

printVehicle(car); 
// Output: Car: Toyota Corolla
printVehicle(bike);
 // Output: Bike: Yamaha Sport

Uniones discriminadas

Las uniones discriminadas utilizan una propiedad común para diferenciar entre tipos. Ejemplo:

interface Circle {
  kind: "circle";
  radius: number;
}

interface Rectangle {
  kind: "rectangle";
  width: number;
  height: number;
}

type Shape = Circle | Rectangle;

function calculateArea(shape: Shape): number {
  if (shape.kind === "circle") {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.width * shape.height;
  }
}

let circle: Circle = { kind: "circle", radius: 5 };
let rectangle: Rectangle = { kind: "rectangle", width: 10, height: 20 };

console.log(calculateArea(circle)); 
// Output: 78.53981633974483
console.log(calculateArea(rectangle)); 
// Output: 200

Comprobación de exhaustividad

La comprobación de exhaustividad garantiza que se gestionen todos los casos posibles de una unión discriminada. Ejemplo:

function getShapeInfo(shape: Shape): string {
  switch (shape.kind) {
    case "circle":
      return `Circle with radius ${shape.radius}`;
    case "rectangle":
      return `Rectangle with dimensions ${shape.width}x${shape.height}`;
    default:
      // This line ensures all cases are handled
      const _exhaustiveCheck: never = shape;
      return _exhaustiveCheck;
  }
}

Errores comunes

Estos son algunos errores comunes al usar guardas de tipo:

Olvidar incluir todos los casos en un tipo de unión.
No usar una guarda de tipo en todas las ramas de la lógica condicional.
Usar incorrectamente as para convertir tipos sin realizar las comprobaciones adecuadas.

Consejo: Use siempre guardas de tipo para restringir los tipos antes de acceder a sus propiedades o métodos específicos.

¡Excelente trabajo!

¡Felicitaciones! Ha aprendido a usar guardas de tipo en TypeScript para restringir los tipos durante la ejecución y garantizar la seguridad de tipos. Las guardas de tipo son esenciales para gestionar tipos de unión complejos y crear código sólido y libre de errores. En la próxima lección, explorará los tipos mapeados avanzados. ¡Sigamos programando!

Preguntas frecuentes

¿La lección «Protectores de tipos» es gratis?

Sí — el texto completo de «Protectores de tipos» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Protectores de tipos»?

Trabaje de forma segura con tipos unknown o any mediante protectores de tipos Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Protectores de tipos»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a TypeScript Academy