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

ねこじゃすり

ワタオカねこじゃすりライトグレー

created by Rinker

PEPPY(ペピイ)

¥3,850 (2025/01/05 12:56:12時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品！

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

created by Rinker

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

¥33,000 (2025/01/05 13:22:08時点 Amazon調べ-詳細)

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

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

created by Rinker

ペヤング

¥3,280 (2025/01/05 12:33:38時点 Amazon調べ-詳細)

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

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

created by Rinker

Red Bull(レッドブル)

¥4,000 (2025/01/05 12:33:39時点 Amazon調べ-詳細)

翼を授けよう！

モンスターエナジー 355ml×24本 [エナジードリンク]

アサヒ飲料モンスターエナジー 355ml×24本 [エナジードリンク]

created by Rinker

モンスター

¥4,718 (2025/01/05 12:33:40時点 Amazon調べ-詳細)

脳を活性化させるにはこれ！

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

created by Rinker

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

¥3,940 (2025/01/05 12:41:47時点 Amazon調べ-詳細)

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

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

created by Rinker

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

¥10,429 (2025/01/05 12:09:13時点 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本

モンスターエナジー 355ml×24本 [エナジードリンク]

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

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

TypeScriptでコンパイルエラー

原因と対応

原因

終わりに

CATEGORIES & TAGS

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

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

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

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

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