TypeScriptでFormDataオブジェクトを使って画像をuploadする際に「Object is possibly 'null'.」を回避する方法

こんにちは！kossyです！

さて、今回はTypeScriptでFormDataオブジェクトを使って画像をuploadする際に「Object is possibly 'null'.」を回避する方法について、
備忘録としてブログに残してみたいと思います。

環境

TypeScript 4系
Chrome 最新版

シチュエーション

FormDataオブジェクトを使って画像のアップロード機能を実装しようとしたときに、まず、以下のように実装しました。

    const formData = new FormData()
    const setIcatch = (e: Event) => {
      e.preventDefault()
      formData.append('icatch', e.target.files[0])
    }

ところが、上記の実装の場合、e.target.files[0]の箇所で、「Object is possibly 'null'.」とvscode様からご指摘をくらってしまいます。

ご指摘を賜っている様子
f:id:kossy-web-engineer:20210613003254p:plain

この場合、instanceof演算子を用いることで、「Object is possibly 'null'.」の指摘を回避することができます。

    const formData = new FormData()
    const setIcatch = (e: Event) => {
      e.preventDefault()
      if (e.target instanceof HTMLInputElement && e.target.files) {
        formData.append('icatch', e.target.files[0])
      }
    }