Menu
CoddyTech

Tipos de intersección ('&')

Parte de la sección Introducción a TypeScript del Journey de JavaScript de Coddy. Lección 34 de 73.

Mientras que los tipos unión te permiten crear variables que pueden ser de uno de varios tipos, los tipos intersección funcionan en la dirección opuesta. Combinan varios tipos en un solo tipo que tiene todas las propiedades de los tipos combinados.

Los tipos de intersección usan el operador ampersand (&) para combinar tipos. Cuando intersectas dos tipos de objeto, el resultado contiene todas las propiedades de ambos tipos:

type HasName = { name: string };
type HasAge = { age: number };

type Person = HasName & HasAge;

// Person ahora tiene ambas propiedades name Y age
let user: Person = {
  name: "Alice",
  age: 30
};

Esto es especialmente útil cuando quieres construir tipos complejos a partir de piezas más pequeñas y reutilizables. En lugar de definir un tipo de objeto grande, puedes crear tipos enfocados en aspectos específicos y después combinarlos según sea necesario.

Los tipos de intersección garantizan que el tipo resultante cumpla todos los requisitos de los tipos intersectados. La variable debe tener cada propiedad de todos los tipos de la intersección; no se puede elegir como ocurre con las uniones.

challenge icon

Desafío

Fácil

Crea dos alias de tipo: HasName para un objeto con una propiedad name de tipo string, y HasAge para un objeto con una propiedad age de tipo number.

Crea un tercer alias de tipo llamado Person intersectando HasName y HasAge mediante el operador &.

Crea otro alias de tipo llamado HasEmail para un objeto con una propiedad email de tipo string.

Crea un cuarto alias de tipo llamado Employee intersectando los tres tipos: HasName, HasAge y HasEmail.

Ahora crea las siguientes variables:

  • Crea una variable llamada user de tipo Person con el nombre "Alice" y la edad 25
  • Crea una variable llamada worker de tipo Employee con el nombre "Bob", la edad 30 y el correo electrónico "bob@company.com"

Crea una función llamada displayPerson que acepte un parámetro de tipo Person y devuelva una cadena con el formato "Name: [name], Age: [age]".

Crea otra función llamada displayEmployee que acepte un parámetro de tipo Employee y devuelva una cadena con el formato "Name: [name], Age: [age], Email: [email]".

Llama a ambas funciones con las variables correspondientes e imprime los resultados en líneas separadas.

Pruébalo tú mismo

// TODO: Escribe tu código aquí
// Crea alias de tipos para HasName, HasAge, HasEmail
// Crea los tipos Person y Employee usando intersección
// Crea las variables user y worker
// Crea las funciones displayPerson y displayEmployee
// Llama a las funciones e imprime los resultados
quiz iconPonte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Todas las lecciones de Introducción a TypeScript

Practica por tu cuenta: Playground de TypeScript