TypeScript Academy · Lección

Tipado de mapas de eventos

Asocie nombres de eventos con sus tipos de payload.

Tipado de mapas de eventos 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 un mapa de eventos?

Un mapa de eventos es una interfaz que vincula cada nombre de evento con la forma de su payload. Es la única fuente de verdad de un sistema de eventos.

interface Events {
  login: { userId: string };
  logout: void;
}
// "login" carries a payload; "logout" carries none.

Mapear nombres a payloads

Cada clave de propiedad es un nombre de evento y su tipo de valor es el payload. Esto permite que el sistema de tipos sepa exactamente qué datos espera cada evento.

interface Events {
  message: { text: string; from: string };
  typing: { userId: string };
}
const sample: Events["message"] = { text: "hi", from: "ada" };
console.log(sample.text, sample.from);

Eventos sin payload

Algunos eventos no transportan datos. Modélelos con void (o con un objeto vacío) para indicar que no hay nada que pasar.

interface Events {
  open: void;
  close: void;
}
// Handlers for these receive no meaningful argument.
console.log("payloadless events use void");

Extraer un tipo de nombre de evento

Use keyof para obtener la unión de todos los nombres de evento válidos del mapa, lo que resulta útil para restringir los parámetros de las funciones.

interface Events {
  login: { userId: string };
  logout: void;
}
type EventName = keyof Events; // "login" | "logout"
const e: EventName = "login";
console.log(e);

Consultar un tipo de payload

Indexe el mapa con un nombre de evento para obtener el tipo de payload de ese evento: Events["login"] es { userId: string }.

interface Events {
  login: { userId: string };
  logout: void;
}
type LoginPayload = Events["login"]; // { userId: string }
const p: LoginPayload = { userId: "u1" };
console.log(p.userId);

Un mapa de eventos más completo

Las aplicaciones reales tienen muchos eventos. Cada uno obtiene un contrato de payload claro en un único lugar, de modo que los productores y consumidores siempre están de acuerdo.

interface Events {
  cartAdd: { productId: string; qty: number };
  cartRemove: { productId: string };
  checkout: { total: number };
}
const a: Events["cartAdd"] = { productId: "p1", qty: 2 };
console.log(a.productId, a.qty);

Los payloads pueden ser uniones

Un tipo de payload puede ser a su vez una unión discriminada, lo que permite que un evento transporte varias formas relacionadas.

interface Events {
  status:
    | { kind: "online" }
    | { kind: "offline"; since: number };
}
const s: Events["status"] = { kind: "offline", since: 100 };
console.log(s.kind);

Reutilizar tipos de payload

Puede definir los tipos de payload por separado y referenciarlos en el mapa, manteniendo la interfaz ordenada y las formas reutilizables.

type User = { id: string; name: string };
interface Events {
  userCreated: User;
  userDeleted: { id: string };
}
const u: Events["userCreated"] = { id: "1", name: "Ada" };
console.log(u.name);

Por qué un mapa es mejor que cadenas sueltas

Sin un mapa, los nombres de eventos son simples cadenas y los payloads son any. El mapa proporciona autocompletado, validación y un contrato.

// Loose: emit("login", { usrId: "x" }) typo unnoticed, payload any
// Mapped: the interface forces the correct name and payload shape.
console.log("the map is the contract");

El mapa dirige la API

En las próximas lecciones, emit y on serán genéricos respecto al mapa de eventos y usarán keyof y el acceso indexado para mantener la seguridad de tipos.

interface Events {
  login: { userId: string };
  logout: void;
}
type Name = keyof Events;
type PayloadOf<K extends Name> = Events[K];
const id: PayloadOf<"login"> = { userId: "u" };
console.log(id.userId);

Una única fuente de verdad

Como todo se deriva del mapa de eventos, cambiar un payload en un único lugar actualiza cada emit y cada handler que lo utiliza.

interface Events {
  ping: { at: number };
}
const p: Events["ping"] = { at: Date.now() };
console.log(typeof p.at);

Comprobación rápida: mapas de eventos

Compruebe su comprensión de la tipificación de mapas de eventos.

Resumen: tipificación de mapas de eventos

Aprendió a modelar eventos como una interfaz que asigna nombres a payloads, usando void para eventos sin payload, keyof para los nombres y el acceso indexado para los tipos de payload, la base de un sistema de eventos con seguridad de tipos.

interface Events { login: { userId: string }; logout: void }
type Name = keyof Events;
const n: Name = "logout";
console.log(n);

Preguntas frecuentes

¿La lección «Tipado de mapas de eventos» es gratis?

Sí — el texto completo de «Tipado de mapas de eventos» 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 «Tipado de mapas de eventos»?

Asocie nombres de eventos con sus tipos de payload. 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 «Tipado de mapas de eventos»?

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

← Volver a TypeScript Academy