0Pricing
TypeScript Academy · Lección

Patrones prácticos con uniones e intersecciones

Aplique uniones e intersecciones en situaciones reales.

Patrones prácticos con uniones e intersecciones 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.

Bienvenido

Los tipos unión e intersección permiten implementar muchos patrones de TypeScript del mundo real. En esta lección se exploran combinaciones prácticas que utilizará en código de producción.

Patrón de carga útil opcional

Modele funciones o eventos que pueden incluir datos o no mediante una unión.
type Event =
  | { type: 'click'; x: number; y: number }
  | { type: 'keypress'; key: string }
  | { type: 'blur' };

Builder/mixin con intersección

Use intersecciones para componer conjuntos de funcionalidades en un tipo combinado.
type Serializable = { serialize(): string };
type Validatable = { validate(): boolean };
type Model = Serializable & Validatable & { id: number };

Unión para normalizar entradas

Acepte tipos de entrada flexibles en una función y normalícelos a un tipo canónico.
function toArray<T>(val: T | T[]): T[] {
  return Array.isArray(val) ? val : [val];
}

Tipos con marca mediante intersección

Cree tipos distintos a partir del mismo tipo primitivo mediante intersecciones con un marcador de marca único.
type UserId = number & { __brand: 'UserId' };
type PostId = number & { __brand: 'PostId' };
// Prevents accidentally mixing IDs

Patrón WithOptional

Use una intersección con Partial para crear un tipo base en el que algunos campos sean obligatorios y otros opcionales.
type RequiredFields = { id: number; email: string };
type OptionalFields = Partial<{ name: string; bio: string }>;
type UserUpdate = RequiredFields & OptionalFields;

Props de componentes polimórficos

En React, los tipos unión permiten que las props de un componente varíen según un discriminante.
type ButtonProps =
  | { variant: 'primary'; onClick: () => void }
  | { variant: 'link'; href: string };

Extensión de tipos de terceros

Intersecte tipos de terceros con sus propias adiciones.
import type { Request } from 'express';
type AuthRequest = Request & { user: User };

Combinación de unión e intersección

Las uniones y las intersecciones se pueden combinar. Los paréntesis controlan la precedencia.
type Admin = { role: 'admin' };
type User = { role: 'user' };
type LoggedIn = { sessionId: string };
type AuthUser = (Admin | User) & LoggedIn;

Type guards para miembros de una unión

Escriba una función type guard reutilizable para estrechar una unión sin repetir comprobaciones.
function isAdmin(u: AuthUser): u is Admin & LoggedIn {
  return u.role === 'admin';
}

Comportamiento distributivo en intersecciones

Ley distributiva: A & (B | C) = (A & B) | (A & C). TypeScript la aplica automáticamente.
type Base = { id: number };
type AB = Base & (string | number);
// equivalent to: (Base & string) | (Base & number)

Comprobación rápida

¿Qué patrón crea un tipo distinto a partir de `number` para evitar mezclar accidentalmente identificadores?

Resumen

Los tipos unión e intersección se combinan para modelar estructuras complejas del mundo real: identificadores con marca, comportamientos mixin, entradas flexibles y props de componentes discriminadas. Domine estos patrones para crear TypeScript de calidad profesional.

Preguntas frecuentes

¿La lección «Patrones prácticos con uniones e intersecciones» es gratis?

Sí — el texto completo de «Patrones prácticos con uniones e intersecciones» 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 «Patrones prácticos con uniones e intersecciones»?

Aplique uniones e intersecciones en situaciones reales. 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 «Patrones prácticos con uniones e intersecciones»?

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 unión: A o B
  2. Tipos intersección: A y B
  3. Uniones discriminadas para coincidencias seguras de patrones
  4. Patrones prácticos con uniones e intersecciones
← Volver a TypeScript Academy