🏷️

カスタムイベントの登録と型定義

に公開
TypeScript
tech

概要

TypeScriptにおけるカスタムイベントおよびカスタムデータの型定義を行う

作成するカスタムイベント

link という名前で、カスタムデータにURLオブジェクトを受け取るカスタムイベントを作成する。

型定義ファイルの作成

src/@types/link-event.d.ts を作成する。

export {}

declare global {
  interface DocumentEventMap {
    'link': CustomEvent<URL>
  }
}

今回はdocumentにイベント登録するため、DocumentEventMapを拡張する。
カスタムイベントの型定義をするには、CustomEvent<T>型のDocumentEventMapに新しいキーを追加する。<T>にはカスタムデータの型が入る。

カスタムイベントの登録と発火

登録

document.addEventListener('link', e => {
  const href = e.detail // URL
})

登録は通常のイベントと同じようにaddEventListenerを使用する。型定義を作成しているため、e.detailはURLとして補完が効く状態になっている。

発火

const event = new CustomEvent('link', { detail: new URL('/') })
document.dispatchEvent(event)

発火するときは、dispatchEvent()にCustomEventを渡す。Eventではなく、CustomEventであることに注意すること。
カスタムデータはCustomEventのインスタンス作成時に、{ detail: カスタムデータ }の形式で渡す必要がある。

Discussion