Come implementare la tipizzazione degli eventi personalizzati (custom events) in TypeScript? Quali sono le sfide da considerare quando si lavora con oggetti evento e passaggio di dati?

Risposta.

TypeScript consente di tipizzare gli eventi personalizzati per garantire il corretto funzionamento con i loro oggetti, specialmente nelle applicazioni web o quando si lavora con il pattern pub/sub. Per la tipizzazione degli eventi si usa spesso il tipo CustomEvent con un tipo generico parametrizzato:

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

Chiavi delle sfide:

• È necessario assicurarsi che il tipo di evento utilizzato (CustomEvent<T>) corrisponda sia nella creazione dell'evento che nel suo trattamento.
• Se si utilizza un evento nativo, usare i tipi di evento di base, e non any o object.
• Non dimenticare l'ereditarietà degli eventi se si creano propri tipi.

Domanda trabocchetto.

Spesso viene chiesto: "È possibile tipizzare direttamente l'oggetto evento come CustomEvent<Type> nel gestore, se l'evento è generato da una libreria di terze parti?"

La risposta esatta: Solo se si sa con certezza che la libreria genera eventi tramite CustomEvent con un generico. In caso contrario, la tipizzazione sarà errata, e potrebbero verificarsi errori a runtime.

Esempio:

document.addEventListener('some-event', (e: Event) => {
  // Errato: 'e' non è necessariamente CustomEvent
  const detail = (e as CustomEvent<{ id: number }>).detail;
  // Questo porterà a un errore se l'evento non è CustomEvent
});

Esempi di errori reali a causa della mancata conoscenza delle complessità del tema.

---

Storia

Nel progetto si utilizzava un'astrazione pub/sub e si lanciavano eventi tramite un semplice Event anziché un CustomEvent. Ci si aspettava di poter accedere a event.detail, ma l'evento di base Event non ha tale campo, il che ha portato a undefined silenzioso e bug difficili da catturare.

---

Storia

Parte del team tipizzava gli eventi personalizzati tramite any, per implementare "più velocemente" i gestori per diverse scenari. Di conseguenza, successivamente si sono verificati errori a causa del passaggio di diverse strutture di dati tramite detail, e TypeScript non segnalava le discrepanze.

---

Storia

In un progetto si è iniziato a utilizzare la tipizzazione degli eventi come CustomEvent<string>, passando oggetti complessi tramite detail. Per errore si è serializzato detail, il che ha portato alla necessità di fare un JSON.parse aggiuntivo sul lato gestore e alla perdita di tipizzazione all'interno di TypeScript.