addEventListenerのリスナー関数の引数`(event: Event)`の型を上書きしたい

Question

addEventListenerのリスナー関数の引数(event: Event)の型を上書きしたい

changeイベントはinput要素、select要素、textarea要素で発生するのでtargetを使う際に型ガードするより引数の型で指定しておきたいのですが

interface HTMLElementEvent<T extends EventTarget = Element> extends Event {
  readonly target: T
}

// HTMLElementEvent型のtargetプロパティはEvent型のtargetプロパティと互換性がありません
// 的な長いエラーがでる
addEventListener('change', (event: HTMLElementEvent<HTMLInputElement>) => {
  console.log(event.target.value)
})

// エラーがでない
addEventListener('change', {
  handleEvent: (event: HTMLElementEvent<HTMLInputElement>) => {
    console.log(event.target.value)
  }
})

参考：https://chaika.hatenablog.com/entry/2021/11/04/083000

1. これはどうしてこうなりますか？
2. handleEventメソッドを持つオブジェクトではなく関数を渡す方法でもエラーがでなくなる引数の型の書き方があれば教えてください

https://www.typescriptlang.org/play/で確認しています

Answer 1

1. addEventListenerの型定義に違反するためエラーが発生します。
   そこがTypescriptの利点であり、勝手に引数の型をいじるなということですね。
   （DOMの型定義はlib.dom.d.tsにあり、基本的に触らないのが前提）
2. 非推奨ですが気持ちは解りますのでinterfaceで型を上書きする方法を記します。
   回避の術として知っておいて損はないかなと。

// やるなら`addEventListener`の型定義から変更
interface HTMLInputElement {
  addEventListener<K extends keyof HTMLElementEventMap>(
    type: K,
    listener: (this: HTMLInputElement, ev: Event & { target: HTMLInputElement, currentTarget: HTMLInputElement}) => any,
    options?: boolean | AddEventListenerOptions
  ): void;
}

const input = <HTMLInputElement>document.getElementById('input');

input.addEventListener('change', (evt) => {
  console.log(evt.target.value)
  console.log(evt.currentTarget.value)
});

非推奨の理由は

• addEventListenerは複雑な継承を経てるので壊れやすい
• DOMの型を触ると影響範囲が読めない
• addEventListenerを拡張しているのかどうかパッと見てわからない(interface定義は離れた場所にある事が多い)

なので明示的に型ガードしたり、ラップした関数を定義して、
適切に処理してますよという意図を共同開発者や、未来の自分へ伝える以下のような手法をお勧めします。

◇ざっくりな一例

// コールバック関数をラップする関数を用意する場合
// この中で型ガード等を書いたりエラー処理を実装したり、より安全な実装が可能
const onEvent= <T>(cb:(evt:Event & {target:T, currentTarget:T})=> void )=> (ev: any)=> cb(ev)

input.addEventListener('change', onEvent<HTMLInputElement>((evt) => {
  console.log(evt.target.value)
  console.log(evt.currentTarget.value)
}));

Comments

[_._]

ここにはこれしかこないでしょう！とこっちではわかっているつもりなのにtypescriptが許してくれなくてもどかしく思っていましたが既存の型定義は上書きしないほうがいいことが多そうな感じですね