Tipizzare le mappe degli eventi
Associ i nomi degli eventi ai relativi tipi di payload.
Tipizzare le mappe degli eventi è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.
Che cos'è una mappa degli eventi?
Una mappa degli eventi è un'interfaccia che collega ogni nome di evento alla forma del relativo payload. È l'unica fonte di verità per un sistema di eventi.
interface Events {
login: { userId: string };
logout: void;
}
// "login" carries a payload; "logout" carries none.Associare i nomi ai payload
Ogni chiave di proprietà è un nome di evento e il relativo tipo di valore è il payload. In questo modo il sistema dei tipi sa esattamente quali dati richiede ogni 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);Eventi senza payload
Alcuni eventi non trasportano dati. Li modelli con void (oppure con un oggetto vuoto) per indicare che non c'è nulla da passare.
interface Events {
open: void;
close: void;
}
// Handlers for these receive no meaningful argument.
console.log("payloadless events use void");Estrarre un tipo per il nome dell'evento
Usi keyof per ottenere l'unione di tutti i nomi di eventi validi dalla mappa, utile per vincolare i parametri delle funzioni.
interface Events {
login: { userId: string };
logout: void;
}
type EventName = keyof Events; // "login" | "logout"
const e: EventName = "login";
console.log(e);Cercare il tipo di un payload
Indicizzi la mappa con un nome di evento per ottenere il tipo del payload di quell'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);Una mappa degli eventi più ricca
Le applicazioni reali hanno molti eventi. Ognuno riceve un contratto chiaro per il payload in un unico punto, così produttori e consumatori sono sempre d'accordo.
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);I payload possono essere unioni
Un tipo di payload può essere a sua volta un'unione discriminata, consentendo a un singolo evento di trasportare diverse forme correlate.
interface Events {
status:
| { kind: "online" }
| { kind: "offline"; since: number };
}
const s: Events["status"] = { kind: "offline", since: 100 };
console.log(s.kind);Riutilizzare i tipi di payload
Può definire separatamente i tipi dei payload e farvi riferimento nella mappa, mantenendo ordinata l'interfaccia e rendendo riutilizzabili le forme.
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);Perché una mappa è meglio delle stringhe libere
Senza una mappa, i nomi degli eventi sono semplici stringhe e i payload sono any. La mappa offre completamento automatico, convalida e un contratto.
// 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 mappa guida l'API
Nelle prossime lezioni, emit e on saranno generici rispetto alla mappa degli eventi e useranno keyof e l'accesso indicizzato per mantenere la sicurezza dei tipi.
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);Un'unica fonte di verità
Poiché tutto deriva dalla mappa degli eventi, modificare un payload in un unico punto aggiorna ogni emit e ogni handler che lo utilizza.
interface Events {
ping: { at: number };
}
const p: Events["ping"] = { at: Date.now() };
console.log(typeof p.at);Verifica rapida: mappe degli eventi
Verifichi la Sua comprensione della tipizzazione delle mappe degli eventi.
Riepilogo: tipizzazione delle mappe degli eventi
Ha imparato a modellare gli eventi come un'interfaccia che associa i nomi ai payload, usando void per gli eventi senza payload, keyof per i nomi e l'accesso indicizzato per i tipi dei payload: le fondamenta di un sistema di eventi tipizzato.
interface Events { login: { userId: string }; logout: void }
type Name = keyof Events;
const n: Name = "logout";
console.log(n);
Impara TypeScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 101
- Lezioni
- 352
Domande Frequenti
La lezione «Tipizzare le mappe degli eventi» è gratuita?
Sì — il testo completo di «Tipizzare le mappe degli eventi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.
Cosa imparerò in «Tipizzare le mappe degli eventi»?
Associ i nomi degli eventi ai relativi tipi di payload. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare TypeScript Academy?
Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Tipizzare le mappe degli eventi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?
Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Tipizzare le mappe degli eventi
- emit e on type-safe
- Classe Generic Event Emitter
- Inferire gli argomenti dei listener