TypeScriptでFileReaderのresultがstringに代入できない対策

TypeScriptでコンパイルエラー

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

App.vue

<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>

エラー内容

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

原因と対応

原因

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

App.vue

<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>

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

終わりに

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

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