0Pricing
TypeScript Academy · Lección

Combinación de literales en uniones

Cree conjuntos finitos de valores uniendo tipos literales.

Combinación de literales en uniones es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Uniones de tipos literales

Una unión de literales modela un valor que debe ser exactamente una de varias opciones conocidas. Es la base de las máquinas de estados, los enums y las API bien tipadas.

type Status = 'idle' | 'loading' | 'success' | 'error';

let state: Status = 'idle';
state = 'loading';
console.log('State:', state);

Usar switch con una unión literal

Un switch sobre una unión literal resulta claro, y el compilador sabe que cada caso corresponde a uno de los valores permitidos. Esto se combina perfectamente con las comprobaciones de exhaustividad.

type Status = 'idle' | 'loading' | 'done';

function label(s: Status): string {
  switch (s) {
    case 'idle': return 'Waiting';
    case 'loading': return 'Working';
    case 'done': return 'Finished';
  }
}
console.log(label('loading'));

Gestión exhaustiva

Gestionar todos los miembros de una unión se denomina gestión exhaustiva. Cuando cubre todos los casos, TypeScript puede demostrar que la función siempre devuelve un resultado, sin ramas omitidas.

type Dir = 'left' | 'right';

function step(d: Dir): number {
  if (d === 'left') return -1;
  return 1; // only 'right' remains
}
console.log(step('left'), step('right'));

El truco de exhaustividad con never

Asignar el valor a un never en la rama predeterminada provoca un error de compilación si alguna vez añade un nuevo miembro a la unión y olvida gestionarlo. Es una red de seguridad para el código que evoluciona.

type Shape = 'circle' | 'square';

function area(s: Shape): string {
  switch (s) {
    case 'circle': return 'pi r^2';
    case 'square': return 'a^2';
    default:
      const _exhaustive: never = s;
      return _exhaustive;
  }
}
console.log(area('circle'));

Derivar uniones de objetos const

Un patrón habitual consiste en conservar los valores en un objeto const y derivar la unión a partir de sus valores mediante typeof obj[keyof typeof obj]. Una única fuente de verdad, dos resultados.

const Colors = { Red: 'red', Blue: 'blue' } as const;
type Color = typeof Colors[keyof typeof Colors];
// 'red' | 'blue'
const c: Color = Colors.Blue;
console.log(c);

Derivar uniones de las claves

También puede derivar una unión de las claves con keyof typeof obj. Esto resulta útil cuando las propias claves son los identificadores relevantes.

const ICONS = { home: 0, search: 1, profile: 2 } as const;
type IconName = keyof typeof ICONS;
// 'home' | 'search' | 'profile'
const name: IconName = 'search';
console.log(name, ICONS[name]);

Uniones discriminadas con etiquetas literales

Asocie una propiedad literal tag a cada variante del objeto y TypeScript podrá distinguirlas. Comprobar la etiqueta reduce el tipo a la forma exacta.

type Action =
  | { type: 'add'; amount: number }
  | { type: 'reset' };

function reduce(a: Action): number {
  if (a.type === 'add') return a.amount;
  return 0;
}
console.log(reduce({ type: 'add', amount: 5 }));

Reducir por el discriminador

Una vez que comprueba el discriminador literal, el compilador sabe qué variante tiene, por lo que puede acceder de forma segura a sus campos exclusivos sin conversiones de tipo.

type Event =
  | { kind: 'click'; x: number; y: number }
  | { kind: 'key'; code: string };

function handle(e: Event): string {
  if (e.kind === 'key') return 'Key ' + e.code;
  return 'Click ' + e.x + ',' + e.y;
}
console.log(handle({ kind: 'key', code: 'Esc' }));

Combinar varias uniones

Puede componer uniones más grandes a partir de otras más pequeñas y con nombre. Esto mantiene agrupadas las opciones relacionadas y permite reutilizarlas en todo el código.

type Primary = 'red' | 'blue' | 'yellow';
type Secondary = 'green' | 'orange';
type Color = Primary | Secondary;

const c: Color = 'green';
console.log(c);

Las uniones como restricciones de funciones

Pasar una unión literal a una función limita a los llamadores a opciones válidas y proporciona autocompletado en el editor. Es difícil superar esta combinación de seguridad y facilidad de descubrimiento.

type Align = 'left' | 'center' | 'right';

function setAlign(a: Align): void {
  console.log('Aligned', a);
}
setAlign('center');
// setAlign('top'); // Error

Por qué las uniones literales son mejores que string

Usar un parámetro string simple acepta cualquier valor, incluidos los errores tipográficos. Una unión literal detecta los errores en tiempo de compilación y documenta las opciones válidas: una mejora clara para mantener el código.

type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';

function request(m: Method, url: string): void {
  console.log(m, url);
}
request('POST', '/api/users');

Comprobación rápida

Compruebe cuánto ha comprendido sobre las uniones literales.

Resumen: combinar literales

Ha aprendido a:

  • Construir uniones de literales para conjuntos finitos de opciones.
  • Gestionarlas de forma exhaustiva, usando el truco de never como medida de seguridad.
  • Derivar uniones de objetos const mediante keyof typeof y typeof obj[keyof typeof obj].
  • Distinguir variantes mediante propiedades de etiqueta literales.

Siguiente curso: los tipos especiales unknown, never y void.

const ROUTES = { home: '/', about: '/about' } as const;
type Route = typeof ROUTES[keyof typeof ROUTES];
const r: Route = '/about';
console.log(r);

Preguntas frecuentes

¿La lección «Combinación de literales en uniones» es gratis?

Sí — el texto completo de «Combinación de literales en uniones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Combinación de literales en uniones»?

Cree conjuntos finitos de valores uniendo tipos literales. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Combinación de literales en uniones»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Tipos de literales de cadenas y números
  2. Literales booleanos e inferencia de literales
  3. Aserciones const con as const
  4. Combinación de literales en uniones
← Volver a TypeScript Academy