Union, Intersection y Literals

En el mundo real los valores no siempre son de un solo tipo: un id puede ser número o texto, y una función puede devolver un resultado o null si falló. TypeScript tiene herramientas para describir eso con exactitud y que el compilador te avise de los errores.

Los union types con | son una disyuntiva: este valor puede ser A o B. Ejemplo: let id: number | string = 5; y luego id = "abc" también es válido, pero id = true da error.

Son fundamentales en TypeScript porque el mundo real tiene valores que pueden ser de varios tipos: una función que retorna un string en éxito o null en falla, un ID que puede venir como número o como string UUID, o un campo que puede ser texto o un array de textos.

Los intersection types con & son la contraria: este valor es A Y B al mismo tiempo, combinando todas sus propiedades.

Los literal types son el siguiente nivel: en lugar de decir "este valor es un string", dices "este valor es exactamente la cadena nord o sur o este u oeste". Esto permite que TypeScript rechace en compilación cualquier valor que no sea exactamente uno de los esperados.

Los Discriminated Unions combinan un campo literal con un union type para crear estructuras que TypeScript puede analizar automáticamente: en cada rama del if/switch sabe exactamente qué propiedades están disponibles.

// Union types: A | B
type ID = string | number;
function buscar(id: ID): void { /* ... */ }
buscar(42);    // OK
buscar("abc"); // OK
buscar(true);  // Error

// Intersection types: A & B
interface Serializable { toJSON(): string; }
interface Loggable { log(): void; }
type LoggableUser = Usuario & Serializable & Loggable;

// Literal types — solo esos valores exactos
type Direccion = "norte" | "sur" | "este" | "oeste";
type StatusCode = 200 | 201 | 400 | 401 | 404 | 500;
type SiNo = true | false; // = boolean

// Discriminated Union — patrón muy poderoso
type Resultado =
  | { exito: true; datos: string[] }
  | { exito: false; error: string };

function procesar(r: Resultado): void {
  if (r.exito) {
    console.log(r.datos.join(", ")); // TypeScript sabe que datos existe
  } else {
    console.error(r.error);           // TypeScript sabe que error existe
  }
}

// Template literal types (TypeScript 4.1+)
type EventName = "click" | "focus" | "blur";
type HandlerName = `on${Capitalize<EventName>}`;
// = "onClick" | "onFocus" | "onBlur"

type CSSValue = `${number}px` | `${number}%` | `${number}rem`;
const ancho: CSSValue = "100px"; // OK
const alto: CSSValue = "50vh";   // Error