Tipos de unión y de intersección

¡Le damos la bienvenida a la siguiente lección! En esta lección, aprenderá a utilizar tipos de unión para permitir varios tipos posibles para una variable y tipos de intersección para combinar varios tipos en uno solo. Estas son herramientas potentes para crear código flexible y sólido. ¡Comencemos!

¿Qué son los tipos de unión?

Los tipos de unión permiten que una variable tenga más de un tipo. Puede utilizar el símbolo | para definir un tipo de unión.

Ejemplo: Una variable que puede ser una cadena o un número:

Tarea: Declare una variable con un tipo de unión y asígnele valores diferentes.

let value: string | number;
value = "Hello";
console.log(value); // Output: "Hello"

value = 42;
console.log(value); // Output: 42

Uso de tipos de unión en funciones

Puede utilizar tipos de unión en los parámetros de las funciones para permitir varios tipos de entrada. Ejemplo:

Tarea: Escriba una función que acepte un parámetro de tipo unión y lo registre en la consola.

function printValue(value: string | number): void {
  console.log(`The value is ${value}`);
}

printValue("Hello"); // Output: The value is Hello
printValue(100); // Output: The value is 100

¿Qué son los tipos de intersección?

Los tipos de intersección combinan varios tipos en uno solo. Puede utilizar el símbolo & para definir un tipo de intersección.

Ejemplo: Combinar dos tipos de objeto:

Tarea: Cree un tipo de intersección para combinar dos objetos y utilícelo.

type Person = { name: string };
type Employee = { employeeId: number };

type Staff = Person & Employee;

let staffMember: Staff = {
  name: "Alice",
  employeeId: 123,
};

console.log(staffMember);

Uso de protectores de tipos con uniones

TypeScript no sabe qué tipo está utilizando dentro de un tipo de unión. Puede utilizar protectores de tipos para acotar el tipo. Ejemplo:

Tarea: Utilice protectores de tipos para gestionar distintos tipos dentro de una unión.

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

display("Hello"); // Output: String value: HELLO
display(5); // Output: Number value: 10

Tipos de intersección en la práctica

Los tipos de intersección son útiles al trabajar con objetos que comparten propiedades. Ejemplo:

Tarea: Cree un tipo de intersección para los roles de administrador y usuario.

type Admin = { adminLevel: string };
type User = { username: string };

type AdminUser = Admin & User;

let admin: AdminUser = {
  adminLevel: "super",
  username: "admin123",
};

console.log(`Admin ${admin.username} has level ${admin.adminLevel}`);

Errores comunes con los tipos de unión y de intersección

Estos son algunos errores comunes:

• Utilizar un tipo de unión sin gestionar todos los casos posibles (por ejemplo, olvidar un protector de tipos).
• Complicar demasiado los tipos con intersecciones innecesarias.
• Asignar valores incompatibles a un tipo de unión o de intersección.

Consejo: Pruebe siempre su código para asegurarse de que los tipos funcionan como espera.

Cuándo usar uniones e intersecciones

Utilice tipos de unión cuando:

• Una variable pueda tener uno de varios tipos posibles.
• Necesite flexibilidad en los parámetros de una función.

Utilice tipos de intersección cuando:

• Combine varios objetos o tipos en uno solo.
• Cree tipos más complejos para casos de uso específicos.

¡Excelente trabajo!

¡Felicitaciones! Ha aprendido a utilizar tipos de unión y de intersección para abordar situaciones complejas en TypeScript. Estas herramientas hacen que su código sea más flexible y expresivo. En la próxima lección, exploraremos las enumeraciones y cómo ayudan a gestionar valores constantes. ¡Sigamos programando!