Lección 81 — Union Types e Intersección

🧠 Concepto

TypeScript ofrece dos potentes formas de combinar tipos: union types (unión) e intersección.

Union types (|)

Un union type indica que un valor puede ser uno de varios tipos. Se usa el operador |:

let id: string | number;
id = 'abc123';  // ✅
id = 42;        // ✅
id = true;      // ❌ Error: boolean no está en la unión

Para operar con un union type, TS requiere que hagas type narrowing (reducción de tipo) para determinar qué variante concreta tienes.

Type narrowing con typeof

function imprimirId(id: string | number): void {
  if (typeof id === 'string') {
    console.log(id.toUpperCase()); // TS sabe que es string
  } else {
    console.log(id.toFixed(2));    // TS sabe que es number
  }
}

Intersección (&)

Una intersección combina todos los miembros de dos o más tipos. El resultado es un tipo que tiene todas las propiedades de cada tipo combinado.

type Persona = { nombre: string; edad: number };
type Empleado = { empresa: string; salario: number };

type EmpleadoPersona = Persona & Empleado;

const trabajador: EmpleadoPersona = {
  nombre: 'Ana',
  edad: 30,
  empresa: 'TechCorp',
  salario: 50000
}; // ✅ tiene todas las propiedades

Diferencia conceptual

| Unión (|) | Intersección (&) | |---|---| | “Esto o aquello” | “Esto y aquello” | | El valor es de un tipo u otro | El valor es de ambos tipos a la vez | | Se usa con type narrowing | Se usa para componer objetos |

💻 Ejemplo

// Union type
type Resultado = 'éxito' | 'error' | 'pendiente';

function mostrarEstado(estado: Resultado): string {
  switch (estado) {
    case 'éxito':    return '✅ Operación completada';
    case 'error':    return '❌ Algo salió mal';
    case 'pendiente': return '⏳ En espera...';
  }
}

// Union más compleja
type FormaGeometrica =
  | { tipo: 'circulo'; radio: number }
  | { tipo: 'rectangulo'; ancho: number; alto: number };

function calcularArea(forma: FormaGeometrica): number {
  switch (forma.tipo) {
    case 'circulo':
      return Math.PI * forma.radio ** 2;
    case 'rectangulo':
      return forma.ancho * forma.alto;
  }
}

// Intersección
type Identificable = { id: number };
type Nombrable = { nombre: string };
type Fechable = { createdAt: Date };

type Entidad = Identificable & Nombrable & Fechable;

const entidad: Entidad = {
  id: 1,
  nombre: 'Producto',
  createdAt: new Date()
};

📝 Ejercicio

Define un union type MedioTransporte que pueda ser:

• { tipo: 'coche'; puertas: number }
• { tipo: 'bicicleta'; tipoBici: 'montaña' | 'ciudad' }
• { tipo: 'avion'; alas: number }

Escribe una función describir que reciba un MedioTransporte y retorne una descripción legible usando un switch con type narrowing.

⚠️ Nota

En las intersecciones, si dos tipos tienen la misma propiedad con tipos incompatibles, esa propiedad se vuelve never. Por ejemplo: { a: string } & { a: number } → a es never.

🎯 Tip

Usa union types discriminadas (con una propiedad tipo “tag” como tipo) para crear máquinas de estado tipadas. Es un patrón muy expresivo y seguro.