【TypeScript】FileReaderのevent.target.resultがString型に代入出来ない時の原因と対策【ArrayBuffer】

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

created by Rinker

THE NORTH FACE(ザノースフェイス)

¥33,430 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

防水暴風で耐久性抜群なので旅行で大活躍です！

ペヤングソースやきそば 120g×18個

created by Rinker

ペヤング

¥2,600 (2024/04/03 21:42:16時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし！

レッドブルエナジードリンク 250ml×24本

created by Rinker

Red Bull(レッドブル)

¥4,000 (2024/04/03 21:42:12時点 Amazon調べ-詳細)

翼を授けよう！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,250 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

created by Rinker

Bauhutte(バウヒュッテ)

¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

BANDAI SPIRITS ULTIMAGEAR 遊戯王千年パズル 1/1スケール

created by Rinker

BANDAI SPIRITS(バンダイスピリッツ)

¥7,500 (2024/04/03 21:42:14時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ！！

MOFT X 【新型ミニマム版】 iPhone対応スマホスタンド

created by Rinker

MOFT

¥2,880 (2024/04/03 21:42:18時点 Amazon調べ-詳細)

Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！

1 TypeScriptでコンパイルエラー
2 原因と対応
- 2.1 原因
3 終わりに

TypeScriptでコンパイルエラー

TypeScriptを利用して、Formのファイル選択時にサムネイルを出そうと思い、以下のようなコーディングをした際にTypeScriptのエラーが発生しました。

<template lang="pug">
...
(略)
...
</template>
<script lang="ts">
...
(略)
...
  export default class App extends Vue {
    private imageData: string  = "";
...
(略)
...

    fileChange(event) {
      let selectFile = event.target.files[0]
      let path = this.file;
      let reader = new FileReader()
      reader.onload = (e) => {
        let result = e.target.result
        this.imageData = result // エラー
      };
      reader.readAsDataURL(selectFile)
    }
...
(略)
...

</script>

...

(略)

...

</template>

...

(略)

...

export default class App extends Vue {

private imageData: string = "";

...

(略)

...

fileChange(event) {

let selectFile = event.target.files[0]

let path = this.file;

let reader = new FileReader()

reader.onload = (e) => {

let result = e.target.result

this.imageData = result // エラー

};

reader.readAsDataURL(selectFile)

}

...

(略)

...

</script>

Type 'string | ArrayBuffer' is not assignable to type 'string'.
  Type 'ArrayBuffer' is not assignable to type 'string'.

1 2	Type 'string \| ArrayBuffer' is not assignable to type 'string'. Type 'ArrayBuffer' is not assignable to type 'string'.

原因と対応

原因

これは、e.target.resultの戻り値の型がstring | ArrayBufferとなっているため、フィールドの型定義も同様にstring | ArrayBufferにする必要があります。

<template lang="pug">
...
(略)
...
</template>
<script lang="ts">
...
(略)
...
  export default class App extends Vue {
    private imageData: string | ArrayBuffer  = "";
...
(略)
...

    fileChange(event) {
      let selectFile = event.target.files[0]
      let path = this.file;
      let reader = new FileReader()
      reader.onload = (e) => {
        let result = e.target.result
        this.imageData = result
      };
      reader.readAsDataURL(selectFile)
    }
...
(略)
...

</script>

...

(略)

...

</template>

...

(略)

...

export default class App extends Vue {

private imageData: string | ArrayBuffer = "";

...

(略)

...

fileChange(event) {

let selectFile = event.target.files[0]

let path = this.file;

let reader = new FileReader()

reader.onload = (e) => {

let result = e.target.result

this.imageData = result

};

reader.readAsDataURL(selectFile)

}

...

(略)

...

</script>

これでエラーが出なくなります。

終わりに

以上のように、対応方法はとても簡単です。

お困りの方はこちらの方法を試してみてください。

【TypeScript】FileReaderのevent.target.resultがString型に代入出来ない時の原因と対策【ArrayBuffer】

[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット

ペヤング ソースやきそば 120g×18個

レッドブル エナジードリンク 250ml×24本

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド

TypeScriptでコンパイルエラー

原因と対応

原因

終わりに

CATEGORIES & TAGS

[ノースフェイス] THE NORTH FACE メンズアウターマウンテンライトジャケット

ペヤングソースやきそば 120g×18個

レッドブルエナジードリンク 250ml×24本

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

BANDAI SPIRITS ULTIMAGEAR 遊戯王千年パズル 1/1スケール

MOFT X 【新型ミニマム版】 iPhone対応スマホスタンド