TypeScriptの形推論やキャストについて

前提・実現したいこと

個人でプログラミング開発しており、firebaseで画像upload機能を追加しようと考えている。
そこでblobへの変換を試みたところ、型の整合性がなくエラーとなるケースが多々ある。

発生している問題・エラーメッセージ

型 'FileList | null' の引数を型 'BlobPart[] | undefined' のパラメーターに割り当てることはできません。
  型 'null' を型 'BlobPart[] | undefined' に割り当てることはできません。ts

該当のソースコード

const imageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files;
    console.log(file);
　　//blob作成としての記述は間違っていないが型の整合性で怒られる
    const blob = new Blob(file, { type: "image/jpeg" });
  };

不明点

変数fileの型が FileList | null、new blobの引数は(blobParts?: BlobPart[] | undefined, options?: BlobPropertyBag | undefined)となっており、第一引数にfileが当てはまらないのはわかるが、力技のキャストでは保守性がなくなるためできる限り使用したくない。

blob作成にあたっての記述方法は間違っていないが、どうしても型の整合性が取れない場合の対応を教えて欲しいです。
よろしくお願いいたします。

Zuishin

2020/09/12 00:18

力業のキャストが一番保守性が高そうな気がしますが。

front

2020/09/12 00:23

@Zuishin コメントいただきありがとうございます。キャスト = 「本来の型ではない型を強引に入れている」そのためバグの起因につながると考えているのですが、こちらの認識は間違いでしょうか。

maisumakun

2020/09/12 00:26

fileがnullとなった場合は、どのような処理をさせたいのですか？

front

2020/09/12 00:28

@maisumakun fileがnullの場合は、一旦alertなどでエラー表示をさせたいと考えております。

行動規範の内容に同意します

回答1件

ベストアンサー

fileがnullの場合は、一旦alertなどでエラー表示をさせたいと考えております。

では、その条件分岐をすれば解決するかと思います。

typescript
1    const file = e.target.files;
2    console.log(file);
3    if(file) {
4      // 条件分岐の関係上、この中ではfile==nullの可能性は消え、
5      // fileはFileList型に確定する
6      const blob = new Blob(file, { type: "image/jpeg" });
7    } else {
8      alert('適当なメッセージ');
9    }
10

投稿2020/09/12 00:39

maisumakun

総合スコア145208

front

2020/09/12 01:24

@maisumakun 回答いただきありがとうございます。こちらでnullについては消えること確認できました。しかし下記のエラーは残っている状態です。こちらは変数fileをキャストするしか方法はないのでしょうか。型 'FileList' の引数を型 'BlobPart[]' のパラメーターに割り当てることはできません。