回答。

TypeScriptは、カスタムイベントをタイプ化することを可能にし、特にウェブアプリケーションやpub/subパターンを使用する場合に、それらのオブジェクトが正しく機能することを保証します。イベントの型付けには、しばしばパラメータ化されたジェネリック型CustomEventが使用されます：

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

主な注意点：

使用するイベントの型（CustomEvent<T>）が、イベントの作成時と処理時の両方で一致していることを確認する必要があります。
ネイティブイベントを使用する場合は、anyやobjectではなく基本的なイベント型を使用してください。
独自のタイプを作成する場合、イベントの継承を忘れないでください。

結論を問う質問。

よく尋ねられます：「外部ライブラリがイベントを生成する場合、ハンドラー内でイベントオブジェクトを直接CustomEvent<Type>としてタイプ付けできますか？」

正しい答えは、ライブラリがジェネリックを使用してCustomEventを介してイベントを生成することが正確にわかっている場合のみです。そうでなければ、タイプ付けが不正確になり、ランタイムエラーが発生する可能性があります。

例：

document.addEventListener('some-event', (e: Event) => {
  // 誤り：'e'は必ずしもCustomEventではない
  const detail = (e as CustomEvent<{ id: number }>).detail;
  // これはイベントがCustomEventでない場合、エラーを引き起こします
});

トピックの微妙なニュアンスについての実際のエラー事例。

ストーリー

あるプロジェクトで、pub/subの抽象化を使用し、CustomEventではなく単純なEventを介してイベントを投げていました。event.detailにアクセスできると思っていましたが、基本のEventにはそのフィールドがなく、無音のundefinedや捕まえにくいバグを引き起こしました。

ストーリー

チームの一部は、さまざまなシナリオにハンドラーを迅速に統合するためにカスタムイベントをanyでタイプ付けしました。その結果、異なるデータ構造をdetailを介して渡すことによってエラーが発生し、TypeScriptは不一致を警告しませんでした。

ストーリー

1つのプロジェクトで、CustomEvent<string>としてイベントをタイプ化し、detailを介して複雑なオブジェクトを渡し始めました。誤ってdetailをシリアライズしたため、ハンドラー側で追加のJSON.parseを行う必要が生じ、TypeScript内のタイプが失われました。

TypeScriptでカスタムイベントのタイプを実装するにはどうすればよいですか？イベントオブジェクトやデータの渡し方を扱う際に注意すべき点は何ですか？

回答。

結論を問う質問。

トピックの微妙なニュアンスについての実際のエラー事例。