Jak zrealizować typizację zdarzeń użytkownika (custom events) w TypeScript? Jakie niuanse należy uwzględnić przy pracy z obiektami zdarzeń i przesyłaniu danych?

Odpowiedź.

TypeScript pozwala na typizację własnych zdarzeń, aby zapewnić poprawne działanie z ich obiektami, szczególnie w aplikacjach internetowych lub przy pracy z wzorcem pub/sub. Do typizacji zdarzeń często używa się typu CustomEvent z parametryzowanym typem generycznym:

interface MyEventDetail {
  username: string;
  age: number;
}

const event = new CustomEvent<MyEventDetail>('user:create', {
  detail: { username: 'alice', age: 30 }
});

document.addEventListener('user:create', (e: CustomEvent<MyEventDetail>) => {
  console.log(e.detail.username);
});

Kluczowe niuanse:

• Należy upewnić się, że używany typ zdarzenia (CustomEvent<T>) zgadza się zarówno przy tworzeniu zdarzenia, jak i przy jego obsłudze.
• Jeśli używane jest natywne zdarzenie, stosuj podstawowe typy zdarzeń, a nie any lub object.
• Nie zapomnij o dziedziczeniu zdarzeń, jeśli tworzysz własne typy.

Pytanie z pułapką.

Często pytają: „Czy można typizować obiekt event bezpośrednio jako CustomEvent<Type> w obsłudze, jeśli zdarzenie generuje zewnętrzna biblioteka?”

Poprawna odpowiedź: Tylko jeśli absolutnie wiadomo, że biblioteka generuje zdarzenia za pomocą CustomEvent z generykiem. W przeciwnym razie typizacja będzie niepoprawna, a błędy podczas wykonywania są możliwe.

Przykład:

document.addEventListener('some-event', (e: Event) => {
  // Błędnie: 'e' niekoniecznie jest CustomEvent
  const detail = (e as CustomEvent<{ id: number }>).detail;
  // To spowoduje błąd, jeśli zdarzenie nie jest CustomEvent
});

Przykłady rzeczywistych błędów z powodu nieznajomości niuansów tematu.

---

Historia

W projekcie używano abstrakcji pub/sub i generowano zdarzenia za pomocą prostego Event zamiast CustomEvent. Oczekiwano, że będzie można uzyskać dostęp do event.detail, ale w bazowym Event takie pole nie istnieje, co prowadziło do cichego undefined i trudnych do uchwycenia błędów.

---

Historia

Część zespołu typizowała zdarzenia niestandardowe za pomocą any, aby "szybciej" wdrożyć obsługę różnych scenariuszy. W rezultacie później zaczęły się pojawiać błędy z powodu przesyłania różnych struktur danych przez detail, a TypeScript nie sygnalizował rozbieżności.

---

Historia

W jednym projekcie zaczęto używać typizacji zdarzeń jako CustomEvent<string>, przekazując przy tym złożone obiekty przez detail. Przez pomyłkę zserializowano detail, co prowadziło do konieczności wykonania dodatkowego JSON.parse po stronie obsługi i do utraty typizacji w TypeScript.