Restricción mediante el discriminante
Permita que TypeScript restrinja las variantes en instrucciones switch.
Restricción mediante el discriminante es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 2 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.
Estrechamiento sobre el discriminante
Después de comprobar el discriminante, TypeScript estrecha la unión al miembro correspondiente y permite acceder a sus campos específicos. Esta es la principal ventaja del patrón.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape) {
if (s.kind === "circle") return Math.PI * s.radius ** 2;
return s.side ** 2;
}
console.log(area({ kind: "circle", radius: 2 }).toFixed(2));Usar switch sobre el discriminante
Un switch sobre el discriminante es la forma más clara de gestionar cada variante. Dentro de cada case, el tipo se estrecha automáticamente.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.radius ** 2;
case "square": return s.side ** 2;
}
}
console.log(area({ kind: "square", side: 5 }));Campos específicos de cada miembro en cada caso
En el caso "circle", s.radius está disponible, pero s.side no. TypeScript sabe exactamente en qué miembro se encuentra.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function describe(s: Shape) {
switch (s.kind) {
case "circle": return "r=" + s.radius;
case "square": return "side=" + s.side;
}
}
console.log(describe({ kind: "circle", radius: 9 }));Estrechamiento basado en if
No necesita usar un switch. Una simple comparación del discriminante con if produce un estrechamiento igual de eficaz.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function perimeter(s: Shape): number {
if (s.kind === "circle") {
return 2 * Math.PI * s.radius;
}
return 4 * s.side;
}
console.log(perimeter({ kind: "square", side: 3 }));Acceder al campo equivocado produce un error
Antes de estrechar el tipo, no puede acceder a un campo específico de un miembro. TypeScript informa de un error porque la propiedad no existe en todos los miembros.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function broken(s: Shape) {
// Error: radius does not exist on Square
// return s.radius;
return s.kind;
}
console.log(broken({ kind: "square", side: 1 }));Estrechamiento con discriminantes booleanos
Para una unión { ok: true } | { ok: false }, comprobar if (r.ok) estrecha el tipo al miembro de éxito.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
function handle(r: Result): string {
if (r.ok) return "Data: " + r.data;
return "Error: " + r.error;
}
console.log(handle({ ok: false, error: "boom" }));Estrechamiento mediante retorno anticipado
Al devolver el resultado anticipadamente para una variante, el código restante se estrecha a las otras variantes. Es una forma clara de procesar los casos uno a uno.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function label(s: Shape): string {
if (s.kind === "circle") return "circle";
// s is now narrowed to Square here
return "square with side " + s.side;
}
console.log(label({ kind: "square", side: 8 }));Combinar con otras condiciones
Puede combinar la comprobación del discriminante con otra lógica. TypeScript conserva el estrechamiento mientras la condición del discriminante sea verdadera en esa rama.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function bigCircle(s: Shape): boolean {
return s.kind === "circle" && s.radius > 100;
}
console.log(bigCircle({ kind: "circle", radius: 150 }));Estrechamiento en filtros de arrays
El estrechamiento también funciona dentro de las funciones de callback. Aquí cada figura se comprueba individualmente a medida que se recorre la colección.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 1 },
{ kind: "square", side: 2 }
];
shapes.forEach(s => {
if (s.kind === "circle") console.log("c", s.radius);
else console.log("s", s.side);
});Los retornos de switch conservan la seguridad de tipos
Cuando un switch gestiona todos los casos y devuelve un resultado, TypeScript infiere un tipo de retorno preciso a partir de la unión de los resultados de todos los casos.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function tag(s: Shape) {
switch (s.kind) {
case "circle": return s.radius;
case "square": return s.side;
}
}
console.log(tag({ kind: "circle", radius: 4 }));Unir todas las técnicas de estrechamiento
Ya use switch o if, comprobar el discriminante es lo que permite acceder de forma segura a los campos del miembro. A continuación garantizaremos que se gestione cada caso.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape): number {
return s.kind === "circle" ? Math.PI * s.radius ** 2 : s.side ** 2;
}
console.log(Math.round(area({ kind: "circle", radius: 10 })));Comprobación rápida: estrechamiento
Compruebe su comprensión del estrechamiento mediante discriminantes.
Resumen: estrechamiento sobre el discriminante
Ha visto que comprobar el discriminante con switch o if estrecha la unión a un solo miembro y expone únicamente los campos de ese miembro. Los retornos anticipados y las condiciones combinadas también conservan el estrechamiento.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const s: Shape = { kind: "square", side: 7 };
console.log(s.kind === "square" ? s.side : 0);Preguntas frecuentes
¿La lección «Restricción mediante el discriminante» es gratis?
Sí — el texto completo de «Restricción mediante el discriminante» 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 «Restricción mediante el discriminante»?
Permita que TypeScript restrinja las variantes en instrucciones switch. 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 2 de 4.
¿Cuánto tiempo toma la lección «Restricción mediante el discriminante»?
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