Wie implementiert man die Typisierung von benutzerdefinierten Ereignissen (custom events) in TypeScript? Welche Besonderheiten sind bei der Arbeit mit Event-Objekten und der Datenübergabe zu beachten?

Antwort.

TypeScript ermöglicht die Typisierung von eigenen Ereignissen, um die korrekte Arbeit mit ihren Objekten zu gewährleisten, insbesondere in Webanwendungen oder bei der Arbeit mit dem Pub/Sub-Muster. Für die Typisierung von Ereignissen wird oft der Typ CustomEvent mit einem parametrisierten generischen Typ verwendet:

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

Wichtige Besonderheiten:

• Es muss sichergestellt werden, dass der verwendete Ereignistyp (CustomEvent<T>) sowohl bei der Erstellung des Ereignisses als auch bei dessen Verarbeitung übereinstimmt.
• Wenn ein natives Ereignis verwendet wird, sollten die grundlegenden Ereignistypen und nicht any oder object angewendet werden.
• Denken Sie an die Vererbung von Ereignissen, wenn Sie eigene Typen erstellen.

Fangfrage.

Häufig gefragt: „Kann man das Event-Objekt direkt als CustomEvent<Type> im Handler typisieren, wenn das Ereignis von einer Drittbibliothek erzeugt wird?“

Die richtige Antwort: Nur wenn man absolut sicher weiß, dass die Bibliothek Ereignisse über CustomEvent mit Generics erzeugt. Andernfalls wird die Typisierung inkorrekt sein und es können Laufzeitfehler auftreten.

Beispiel:

document.addEventListener('some-event', (e: Event) => {
  // Falsch: 'e' muss nicht unbedingt ein CustomEvent sein
  const detail = (e as CustomEvent<{ id: number }>).detail;
  // Dies führt zu einem Fehler, wenn das Ereignis kein CustomEvent ist
});

Beispiele für reale Fehler aufgrund von Unkenntnis der Feinheiten des Themas.

---

Geschichte

In einem Projekt wurde eine Pub/Sub-Abstraktion verwendet und Ereignisse wurden über ein einfaches Event anstelle von CustomEvent ausgelöst. Man erwartete, auf event.detail zugreifen zu können, aber das basale Event hat kein solches Feld, was zu schleichendem undefined und schwer fassbaren Bugs führte.

---

Geschichte

Ein Teil des Teams typisierte benutzerdefinierte Ereignisse über any, um "schneller" Handler für verschiedene Szenarien einzuführen. In der Folge traten später Fehler auf, weil verschiedene Datenstrukturen über detail übergeben wurden, und TypeScript keine Warnungen über Unstimmigkeiten gab.

---

Geschichte

In einem Projekt wurde die Typisierung von Ereignissen als CustomEvent<string> verwendet, wobei komplexe Objekte über detail übergeben wurden. Aus Versehen wurde detail serialisiert, was zur Notwendigkeit führte, JSON.parse im Handler auszuführen und zur Verlust der Typisierung innerhalb von TypeScript.