CodeAventura
TypeScript
▸Tipos avanzados▸Discriminated unions

Misión

Editor
Consola
La consola está vacía. Pulsa EJECUTAR para correr tu código.
18 / 24Discriminated unions
Anterior

Discriminated unions

Union types con superpoderes

Ya conoces los union types: string | number. Pero cuando trabajas con objetos, los unions se vuelven mucho más potentes con un patrón llamado discriminated unions.

La idea: cada miembro de la union tiene una propiedad común (el "discriminante") con un valor literal diferente. TypeScript usa esa propiedad para saber exactamente qué tipo es.

tipo es el discriminante. Un Circulo siempre tiene tipo: "circulo", un Rectangulo siempre tiene tipo: "rectangulo".

Narrowing automático

Cuando verificas el discriminante, TypeScript sabe qué tipo es:

Sin type guards manuales, sin casting. TypeScript entiende tu código.

switch: el patrón más limpio

El switch es perfecto para discriminated unions:

Cada case refina el tipo automáticamente. Dentro de case "circulo", solo puedes acceder a las propiedades de Circulo.

Casos de uso reales

Las discriminated unions están en todas partes:

El discriminante puede llamarse como quieras

Aunque type, kind y status son los más comunes, cualquier propiedad con literal types funciona:

Lo importante es que todos los miembros de la union tengan esa propiedad con un literal type diferente.

Tu desafío 🚀

  1. Crea discriminated unions para formas geométricas: Círculo (radio), Rectángulo (ancho y alto) y Triángulo (base y altura). Cada una con un campo tipo como discriminante
  2. Crea una función calcularArea que use switch para calcular el área de cada forma
  3. Prueba con cada tipo de forma e imprime los resultados

Las discriminated unions son uno de los patrones más importantes de TypeScript. Modelan datos que pueden tener diferentes formas de manera segura y elegante.