Construcción de uniones discriminadas
Etiquete los miembros de una unión con una propiedad discriminante compartida.
Construcción de uniones discriminadas es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 1 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.
¿Qué es una unión discriminada?
Una unión discriminada es una unión de tipos de objeto que comparten una propiedad literal común llamada discriminante. Esa etiqueta compartida permite que TypeScript distinga los miembros.
// The shared "kind" property is the discriminant
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Shape = Circle | Square;La propiedad discriminante
El discriminante debe ser un tipo literal (como "circle"), no un tipo amplio como string. Cada miembro recibe su propio valor literal único.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
const c: Circle = { kind: "circle", radius: 10 };
console.log(c.kind); // "circle"Cada miembro tiene sus propios campos
Además del discriminante compartido, cada miembro contiene los campos que solo tienen sentido para él. Un círculo tiene un radius; un cuadrado tiene un side.
type Circle = { kind: "circle"; radius: number };
type Square = { kind: "square"; side: number };
type Rectangle = { kind: "rectangle"; width: number; height: number };
type Shape = Circle | Square | Rectangle;Construir valores de una unión
Al construir un valor, TypeScript comprueba que su estructura coincida exactamente con un miembro de la unión basándose en su kind.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 5 },
{ kind: "square", side: 4 }
];
console.log(shapes.length); // 2¿Por qué no usar simplemente campos opcionales?
Un tipo flexible con campos opcionales (radius?, side?) permite combinaciones no válidas. La unión discriminada hace que los estados ilegales no se puedan representar.
// Loose and error-prone: nothing stops radius + side together
type BadShape = { radius?: number; side?: number };
const bad: BadShape = { radius: 5, side: 4 }; // nonsense, but allowedEl nombre del discriminante depende de usted
Convencionalmente, la etiqueta se llama kind o type, pero cualquier nombre funciona siempre que todos los miembros utilicen el mismo nombre de propiedad con un valor literal distinto.
type Event =
| { type: "click"; x: number; y: number }
| { type: "scroll"; delta: number };
const e: Event = { type: "click", x: 10, y: 20 };
console.log(e.type); // "click"Modelar una calculadora de áreas de figuras
Las uniones discriminadas resultan especialmente útiles cuando cada variante requiere un tratamiento diferente. Aquí configuraremos las figuras que una función de área procesará más adelante.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const myShapes: Shape[] = [
{ kind: "circle", radius: 3 },
{ kind: "square", side: 6 }
];
console.log("Count:", myShapes.length);Añadir una tercera variante
Las uniones se pueden ampliar. Añadir un miembro triangle requiere cambiar una sola línea, y TypeScript lo tendrá en cuenta en todos los lugares donde se utilice la unión.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number }
| { kind: "triangle"; base: number; height: number };
const t: Shape = { kind: "triangle", base: 4, height: 8 };
console.log(t.kind);Los literales únicos evitan la superposición
Como cada kind es único, no hay ambigüedad. Un valor pertenece exactamente a un miembro, nunca a dos a la vez.
type A = { kind: "a"; value: number };
type B = { kind: "b"; label: string };
type Union = A | B;
function describe(u: Union) {
return u.kind === "a" ? u.value : u.label;
}
console.log(describe({ kind: "b", label: "hi" }));Discriminantes con etiquetas booleanas
El discriminante no tiene que ser una cadena. Un literal boolean también funciona, lo que resulta práctico para los resultados de éxito o error.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
const r: Result = { ok: true, data: "loaded" };
console.log(r.ok ? r.data : r.error);Uniones discriminadas en la práctica
Ahora dispone de un modelo completo de figuras. En la siguiente lección usará el estrechamiento sobre el discriminante para acceder de forma segura al campo específico de cada miembro.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const sample: Shape = { kind: "circle", radius: 7 };
console.log(sample.kind, "ready");Comprobación rápida: discriminantes
Compruebe su comprensión de las uniones discriminadas.
Resumen: construir uniones discriminadas
Ha aprendido que una unión discriminada combina tipos de objeto que comparten un discriminante literal como kind. Cada miembro contiene sus propios campos, los literales únicos evitan la superposición y este patrón hace que los estados ilegales no se puedan representar.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const done: Shape = { kind: "square", side: 2 };
console.log("Recap complete:", done.kind);Preguntas frecuentes
¿La lección «Construcción de uniones discriminadas» es gratis?
Sí — el texto completo de «Construcción de uniones discriminadas» 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 «Construcción de uniones discriminadas»?
Etiquete los miembros de una unión con una propiedad discriminante compartida. 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 1 de 4.
¿Cuánto tiempo toma la lección «Construcción de uniones discriminadas»?
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
- Construcción de uniones discriminadas
- Restricción mediante el discriminante
- Comprobación de exhaustividad con never
- Modelado de máquinas de estados