emit et on avec la sécurité du typage
Imposer les bonnes données utiles lors de l’émission et de l’écoute d’événements.
emit et on avec la sécurité du typage est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Une signature emit sûre du point de vue du typage
Rendez emit générique par rapport au nom d’événement K. Le paramètre de charge utile devient alors Events[K], de sorte que le nom et la charge utile doivent correspondre.
interface Events { login: { userId: string }; logout: void }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {
console.log("emit", event, JSON.stringify(payload));
}
emit("login", { userId: "u1" });Une charge utile incorrecte provoque une erreur de compilation
Si la charge utile ne correspond pas au nom de l’événement, TypeScript la rejette. Le type générique relie les deux paramètres.
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {}
// emit("login", { id: "u1" }); // Error: id is not userId
emit("login", { userId: "u1" });
console.log("ok");Les noms d’événements inconnus sont rejetés
Comme K extends keyof Events, vous ne pouvez pas émettre un événement qui ne figure pas dans la carte.
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(event: K, payload: Events[K]) {}
// emit("signup", { userId: "x" }); // Error: "signup" not a key
emit("login", { userId: "x" });
console.log("only known events");Gestionnaires typés avec l’abonnement
La méthode on enregistre un gestionnaire dont l’argument est exactement Events[K], de sorte que les gestionnaires reçoivent des charges utiles correctement typées.
interface Events { login: { userId: string }; logout: void }
function on<K extends keyof Events>(event: K, handler: (payload: Events[K]) => void) {
console.log("subscribed to", event);
}
on("login", (p) => console.log(p.userId));L’argument du gestionnaire est inféré
Vous n’annotez pas le paramètre du gestionnaire ; TypeScript l’infère à partir du nom de l’événement, ce qui fournit une complétion automatique complète dans le corps du gestionnaire.
interface Events { message: { text: string } }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("message", (p) => {
// p is { text: string }
console.log(p.text.toUpperCase());
});Gérer les événements sans charge utile
Pour les événements void, le gestionnaire ne prend simplement aucun argument utile. Vous pouvez appeler son gestionnaire sans données.
interface Events { logout: void }
function on<K extends keyof Events>(event: K, handler: (p: Events[K]) => void) {}
on("logout", () => console.log("logged out"));Combiner emit et l’abonnement
Ensemble, emit et on forment un système typé de publication/abonnement. Émettre un événement transmet une charge utile correctement typée à ses gestionnaires.
interface Events { ping: { at: number } }
type Handler<K extends keyof Events> = (p: Events[K]) => void;
const handlers: { ping: Handler<"ping">[] } = { ping: [] };
function on<K extends keyof Events>(e: K, h: Handler<K>) { handlers[e].push(h as Handler<"ping">); }
function emit<K extends keyof Events>(e: K, p: Events[K]) { handlers[e].forEach(h => h(p as Events["ping"])); }
on("ping", p => console.log("at", p.at));
emit("ping", { at: 5 });Contraindre la position de la charge utile
Le type générique garantit que l’argument de charge utile est vérifié par rapport à l’événement choisi, ce qui détecte les incompatibilités lors de l’appel et non au fond d’un gestionnaire.
interface Events { add: { x: number; y: number } }
function emit<K extends keyof Events>(e: K, p: Events[K]) {
return e;
}
emit("add", { x: 1, y: 2 });
// emit("add", { x: 1 }); // Error: y missing
console.log("payload checked");Complétion automatique des noms d’événements
Comme le premier paramètre est keyof Events, les éditeurs proposent automatiquement les noms d’événements valides pendant la saisie de l’appel.
interface Events { open: void; close: void }
function emit<K extends keyof Events>(e: K, p: Events[K]) {}
// Typing emit(" suggests "open" and "close"
emit("open", undefined as void);
console.log("autocompleted names");Pourquoi les types génériques sont indispensables ici
Sans type générique, vous devriez écrire des surcharges pour chaque événement. Une seule signature générique s’adapte automatiquement à n’importe quel nombre d’événements.
interface Events { a: { x: number }; b: { y: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return p; }
console.log(emit("a", { x: 1 }), emit("b", { y: "hi" }));Un modèle réutilisable
Ce modèle emit<K>(event, payload) et on<K>(event, handler) constitue le cœur de chaque émetteur sûr du point de vue du typage ; nous l’intégrerons à une classe dans la prochaine leçon.
interface Events { tick: { n: number } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
function on<K extends keyof Events>(e: K, h: (p: Events[K]) => void) { return e; }
console.log(emit("tick", { n: 1 }), on("tick", p => p.n));Vérification rapide : emit et abonnement typés
Vérifiez votre compréhension de emit et de l’abonnement sûrs du point de vue du typage.
Récapitulatif : emit et abonnement sûrs du point de vue du typage
Vous avez créé des signatures génériques pour emit et on, dans lesquelles la charge utile est Events[K]. Les noms d’événements bénéficient ainsi de la complétion automatique, les charges utiles incorrectes provoquent des erreurs de compilation et les arguments des gestionnaires sont inférés.
interface Events { login: { userId: string } }
function emit<K extends keyof Events>(e: K, p: Events[K]) { return e; }
console.log(emit("login", { userId: "u1" }));Questions Fréquemment Posées
La leçon « emit et on avec la sécurité du typage » est-elle gratuite ?
Oui — le texte complet de « emit et on avec la sécurité du typage » 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 « emit et on avec la sécurité du typage » ?
Imposer les bonnes données utiles lors de l’émission et de l’écoute d’événements. 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 2 sur 4.
Combien de temps prend la leçon « emit et on avec la sécurité du typage » ?
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