Hoe typiseer je gebruikersspecifieke gebeurtenissen (custom events) in TypeScript? Welke nuances moet je in overweging nemen bij het werken met event-objecten en het doorgeven van gegevens?

Antwoord.

TypeScript maakt het mogelijk om eigen evenementen te typiseren, zodat je verzekerd bent van een correcte werking met hun objecten, vooral in webapplicaties of bij het werken met het pub/sub-patroon. Voor het typiseren van evenementen wordt vaak het type CustomEvent met een parameterized generic type gebruikt:

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

Belangrijke nuances:

• Zorg ervoor dat het gebruikte evenementtype (CustomEvent<T>) overeenkomt bij zowel het creëren van het evenement als bij de verwerking ervan.
• Als je met native evenementen werkt, gebruik dan de basis evenementtypes en geen any of object.
• Vergeet niet over het erven van evenementen als je je eigen types maakt.

Vraag met een valstrik.

Vaak wordt gevraagd: "Kan je het event-object rechtstreeks typiseren als CustomEvent<Type> in de handler, als het evenement door een externe bibliotheek wordt gegenereerd?"

Correct antwoord: Alleen als je absoluut zeker weet dat de bibliotheek evenementen genereert via CustomEvent met generics. Anders zal de typisering onjuist zijn en kunnen er runtime-fouten optreden.

Voorbeeld:

document.addEventListener('some-event', (e: Event) => {
  // Fout: 'e' is niet per se CustomEvent
  const detail = (e as CustomEvent<{ id: number }>).detail;
  // Dit zal leiden tot een fout als het evenement geen CustomEvent is
});

Voorbeelden van echte fouten door onbekendheid met de nuances van het onderwerp.

---

Verhaal

In een project gebruikten ze een pub/sub-abstractie en gooiën ze evenementen via een eenvoudige Event in plaats van CustomEvent. Ze verwachtten dat ze toegang konden krijgen tot event.detail, maar de basis Event heeft dat veld niet, wat leidde tot stille undefined waarden en moeilijk te traceren bugs.

---

Verhaal

Een deel van het team typiseerde de gebruikersspecifieke evenementen met any, om "sneller" handlers voor verschillende scenario's in te voeren. Hierdoor ontstonden er later fouten door het doorgeven van verschillende datastructuren via detail, en TypeScript signaleerde niet dat er inconsistenties waren.

---

Verhaal

In een project gebruikten ze evenementtypisering als CustomEvent<string>, terwijl ze complexe objecten via detail doorgaven. Per ongeluk serialiseerden ze detail, wat leidde tot de noodzaak om een extra JSON.parse aan de kant van de handler uit te voeren en tot verlies van typisering binnen TypeScript.