TypeScriptのaddEventListenerで苦しんだところまとめ

やろうとしたこと

TypeScriptでaddEventListener。
イベントリスナーにおいて、イベント発生元（今回はinput type=file）の情報を取得しようとした。

const image1 =
      document.getElementById('image1');
image1!.addEventListener(
  'change',
  (event) => {
    this.handleInputChange(event.target.files![0]);
  },
  false,
);

問題1

以下のエラーが発生。

TS2339: Property 'files' does not exist on type 'EventTarget'.

問題1の解決

以下の記事でEventをwrapする方法をご教示いただき、上記のエラーは解消。
https://qiita.com/wamei/items/43753e03821964719f31

問題2

EventTargetの型の問題は解決するものの、次は以下のエラーが発生。

TS2345: Argument of type '(event: HTMLElementEvent<HTMLInputElement>) => void' is not assignable to parameter of type 'Ev
entListenerOrEventListenerObject'.
  Type '(event: HTMLElementEvent<HTMLInputElement>) => void' is not assignable to type 'EventListenerObject'.
    Property 'handleEvent' is missing in type '(event: HTMLElementEvent<HTMLInputElement>) => void'.

（未だにTypeScriptのエラーメッセージは慣れない。）

どうやらTypeScript v2.6から追加されたStrict function typesに起因するものらしい。

問題2の解決①

tsconfigに以下の設定を加えることでも回避可能です。

"strictFunctionTypes": false

問題2の解決②

とはいえせっかくなのでお作法に則りエラーを解決したく思い調べて見た所、以下の記法で解決することができました。

image1!.addEventListener(
  'change',
  {handleEvent: (event: HTMLElementEvent<HTMLInputElement>) => {
    this.handleInputChange(event.target.files![0]);
  }},
  false,
);

見栄えが悪いので、addEventListenerの第二引数はオブジェクトとして切り出して定義した方がいいかもしれませんね。

まとめ

あまり掘り下げられておりませんが、一旦備忘録として残しておきます。
認識が誤っている箇所などございましたら、ご指摘頂けますと助かります。