TypeScript Academy · Aula

Definindo Tipos de Mapas de Eventos

Associe nomes de eventos aos tipos de seus dados associados.

Definindo Tipos de Mapas de Eventos é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.

O que é um mapa de eventos?

Um mapa de eventos é uma interface que associa cada nome de evento ao formato da sua carga útil. Ele é a única fonte de verdade de um sistema de eventos.

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

Associando nomes a cargas úteis

Cada chave de propriedade é um nome de evento e seu tipo de valor é a carga útil. Isso permite que o sistema de tipos saiba exatamente quais dados cada evento espera.

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 sem carga útil

Alguns eventos não transportam dados. Modele-os com void (ou um objeto vazio) para indicar que não há nada a transmitir.

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

Extraindo um tipo de nome de evento

Use keyof para obter a união de todos os nomes de eventos válidos do mapa, o que é útil para restringir parâmetros de funções.

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

Consultando um tipo de carga útil

Indexe o mapa com um nome de evento para obter o tipo da carga útil desse evento: Events["login"] é { userId: string }.

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

Um mapa de eventos mais completo

Aplicativos reais têm muitos eventos. Cada um recebe um contrato claro de carga útil em um único lugar, para que produtores e consumidores estejam sempre de acordo.

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);

Cargas úteis podem ser uniões

Um tipo de carga útil pode ser uma união discriminada, permitindo que um evento transporte vários formatos relacionados.

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

Reutilizando tipos de carga útil

Você pode definir os tipos de carga útil separadamente e referenciá-los no mapa, mantendo a interface organizada e os formatos reutilizáveis.

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 que um mapa é melhor que textos soltos

Sem um mapa, os nomes de eventos são textos simples e as cargas úteis são any. O mapa oferece preenchimento automático, validação e um 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");

O mapa orienta a API

Nas próximas lições, emit e on serão genéricos em relação ao mapa de eventos, usando keyof e acesso indexado para manter a segurança 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);

Uma única fonte de verdade

Como tudo deriva do mapa de eventos, alterar uma carga útil em um único lugar atualiza cada emit e manipulador que a utiliza.

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

Verificação rápida: mapas de eventos

Teste sua compreensão sobre a tipagem de mapas de eventos.

Recapitulação: tipagem de mapas de eventos

Você aprendeu a modelar eventos como uma interface que associa nomes a cargas úteis, usando void para eventos sem carga útil, keyof para nomes e acesso indexado para tipos de carga útil — a base de um sistema de eventos com segurança de tipos.

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

Perguntas Frequentes

A aula “Definindo Tipos de Mapas de Eventos” é grátis?

Sim — o texto completo de “Definindo Tipos de Mapas de Eventos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.

O que vou aprender em “Definindo Tipos de Mapas de Eventos”?

Associe nomes de eventos aos tipos de seus dados associados. Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar TypeScript Academy?

Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Definindo Tipos de Mapas de Eventos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de TypeScript Academy?

Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para TypeScript Academy