Typer des cartes d’événements
Associer les noms d’événements aux types de leurs données utiles.
Typer des cartes d’événements est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.
Qu’est-ce qu’une carte d’événements ?
Une carte d’événements est une interface qui associe le nom de chaque événement à la forme de sa charge utile. Elle constitue la source unique de vérité d’un système d’événements.
interface Events {
login: { userId: string };
logout: void;
}
// "login" carries a payload; "logout" carries none.Associer des noms à des charges utiles
Chaque clé de propriété est un nom d’événement et son type de valeur est la charge utile. Le système de types sait ainsi exactement quelles données chaque événement attend.
interface Events {
message: { text: string; from: string };
typing: { userId: string };
}
const sample: Events["message"] = { text: "hi", from: "ada" };
console.log(sample.text, sample.from);Événements sans charge utile
Certains événements ne transportent aucune donnée. Modélisez-les avec void ou un objet vide pour signaler qu’il n’y a rien à transmettre.
interface Events {
open: void;
close: void;
}
// Handlers for these receive no meaningful argument.
console.log("payloadless events use void");Extraire un type de nom d’événement
Utilisez keyof pour obtenir l’union de tous les noms d’événements valides de la carte, ce qui est utile pour contraindre les paramètres des fonctions.
interface Events {
login: { userId: string };
logout: void;
}
type EventName = keyof Events; // "login" | "logout"
const e: EventName = "login";
console.log(e);Rechercher un type de charge utile
Indexez la carte avec un nom d’événement pour obtenir le type de charge utile de cet événement : Events["login"] est de type { userId: string }.
interface Events {
login: { userId: string };
logout: void;
}
type LoginPayload = Events["login"]; // { userId: string }
const p: LoginPayload = { userId: "u1" };
console.log(p.userId);Une carte d’événements plus riche
Les applications réelles comportent de nombreux événements. Chacun reçoit un contrat de charge utile clair en un seul endroit, afin que les producteurs et les consommateurs soient toujours d’accord.
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);Les charges utiles peuvent être des unions
Un type de charge utile peut lui-même être une union discriminée, ce qui permet à un événement de transporter plusieurs formes apparentées.
interface Events {
status:
| { kind: "online" }
| { kind: "offline"; since: number };
}
const s: Events["status"] = { kind: "offline", since: 100 };
console.log(s.kind);Réutiliser les types de charges utiles
Vous pouvez définir séparément les types de charges utiles et les référencer dans la carte, afin de garder l’interface claire et les formes réutilisables.
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);Pourquoi une carte vaut mieux que des chaînes libres
Sans carte, les noms d’événements sont de simples chaînes et les charges utiles sont de type any. La carte fournit la complétion automatique, la validation et un contrat.
// 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");La carte définit l’API
Dans les prochaines leçons, emit et on seront génériques par rapport à la carte d’événements et utiliseront keyof ainsi que l’accès indexé pour rester sûrs du point de vue du typage.
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);Une source unique de vérité
Comme tout découle de la carte d’événements, modifier une charge utile à un seul endroit met à jour chaque emit et chaque gestionnaire qui l’utilise.
interface Events {
ping: { at: number };
}
const p: Events["ping"] = { at: Date.now() };
console.log(typeof p.at);Vérification rapide : cartes d’événements
Vérifiez votre compréhension du typage des cartes d’événements.
Récapitulatif : typer les cartes d’événements
Vous avez appris à modéliser les événements avec une interface associant des noms à des charges utiles, à utiliser void pour les événements sans charge utile, keyof pour les noms et l’accès indexé pour les types de charges utiles, fondement d’un système d’événements sûr du point de vue du typage.
interface Events { login: { userId: string }; logout: void }
type Name = keyof Events;
const n: Name = "logout";
console.log(n);Questions Fréquemment Posées
La leçon « Typer des cartes d’événements » est-elle gratuite ?
Oui — le texte complet de « Typer des cartes d’événements » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Typer des cartes d’événements » ?
Associer les noms d’événements aux types de leurs données utiles. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Typer des cartes d’événements » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?
Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Typer des cartes d’événements
- emit et on avec la sécurité du typage
- Classe générique d’émission d’événements
- Inférer les arguments des écouteurs