投稿日：
2019年9月24日
最終更新日：
【TypeScript】FileReaderのevent.target.resultがString型に代入出来ない時の原因と対策【ArrayBuffer】
YouTubeも見てね♪
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
TypeScriptでコンパイルエラー
TypeScriptを利用して、Formのファイル選択時にサムネイルを出そうと思い、以下のようなコーディングをした際にTypeScriptのエラーが発生しました。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<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>
|
|
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にする必要があります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<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>
|
これでエラーが出なくなります。
終わりに
以上のように、対応方法はとても簡単です。
お困りの方はこちらの方法を試してみてください。