TypeScript Academy · Lekcja

Typowanie map zdarzeń

Mapuj nazwy zdarzeń na typy ich danych

Typowanie map zdarzeń to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Czym jest mapa zdarzeń

Mapa zdarzeń to interfejs, który wiąże każdą nazwę zdarzenia z kształtem jego payloadu. Jest pojedynczym źródłem prawdy dla systemu zdarzeń.

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

Mapowanie nazw na payloady

Każdy klucz właściwości jest nazwą zdarzenia, a jego typ wartości jest typem payloadu. Dzięki temu system typów dokładnie wie, jakich danych oczekuje każde zdarzenie.

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

Zdarzenia bez payloadu

Niektóre zdarzenia nie przenoszą danych. Należy modelować je za pomocą void lub pustego obiektu, aby zasygnalizować, że niczego nie trzeba przekazywać.

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

Wyodrębnianie typu nazwy zdarzenia

Należy użyć keyof, aby uzyskać unię wszystkich poprawnych nazw zdarzeń z mapy. Jest to przydatne do ograniczania parametrów funkcji.

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

Pobieranie typu payloadu

Należy użyć nazwy zdarzenia jako indeksu mapy, aby uzyskać typ payloadu tego zdarzenia: Events["login"] ma typ { userId: string }.

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

Bogatsza mapa zdarzeń

Rzeczywiste aplikacje mają wiele zdarzeń. Każde z nich otrzymuje jasny kontrakt payloadu w jednym miejscu, dzięki czemu nadawcy i odbiorcy zawsze są zgodni.

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

Payloady mogą być uniami

Typ payloadu może sam być unią dyskryminowaną, dzięki czemu jedno zdarzenie może przenosić kilka powiązanych kształtów danych.

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

Ponowne używanie typów payloadów

Typy payloadów można definiować osobno i odwoływać się do nich w mapie, zachowując przejrzystość interfejsu oraz możliwość ponownego użycia kształtów danych.

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

Dlaczego mapa jest lepsza od luźnych stringów

Bez mapy nazwy zdarzeń są zwykłymi stringami, a payloady mają typ any. Mapa zapewnia autouzupełnianie, weryfikację i kontrakt.

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

Mapa napędza API

W kolejnych lekcjach metody emit i on będą generyczne względem mapy zdarzeń, wykorzystując keyof i dostęp indeksowany, aby zachować bezpieczeństwo typów.

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

Jedno źródło prawdy

Ponieważ wszystko wywodzi się z mapy zdarzeń, zmiana payloadu w jednym miejscu aktualizuje każde wywołanie emit i każdy handler, który go używa.

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

Szybkie sprawdzenie: mapy zdarzeń

Proszę sprawdzić swoją wiedzę na temat typowania map zdarzeń.

Podsumowanie: typowanie map zdarzeń

Nauczyli się Państwo modelować zdarzenia jako interfejs mapujący nazwy na payloady, używać void dla zdarzeń bez payloadu, keyof dla nazw oraz dostępu indeksowanego dla typów payloadów — jest to podstawa bezpiecznego typowo systemu zdarzeń.

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

Często zadawane pytania

Czy lekcja „Typowanie map zdarzeń” jest bezpłatna?

Tak — pełny tekst „Typowanie map zdarzeń” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Typowanie map zdarzeń”?

Mapuj nazwy zdarzeń na typy ich danych Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Typowanie map zdarzeń”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do TypeScript Academy