Property 'result' does not exist on type 'EventTarget'

Question

let reader = new FileReader()
reader.onload = event => {
this.image_path = event.target.result
}

このようなコードを書いた時に、event.target.resultのresultに

" Property 'result' does not exist on type 'EventTarget' "

というエラーメッセージが出ます。
同じ質問がgitにあり

https://github.com/Microsoft/TypeScript/issues/4163

ここにあった解決方法

reader.onload = (event:Event & {target: {result:string}}) => {
this.image_path = event.target.result
}

を試したところエラーが消え、正しく動いてくれました

ただ、このコードの読み方、そしてなぜこの書き方だとエラーが消えるのか分かりません

& {target: {result:string}}

ここの部分はどのような意味なのでしょうか

Answer 1

筆者はTypeScriptについては判りませんので, 詳細をご存じの方は補足をお願いいたします.

---

以下のコードはJavaScriptとしては正しいコードです.

let reader = new FileReader()
reader.onload = event => {
this.image_path = event.target.result
} 

しかし, TypeScriptの実行環境においては, Eventクラスのtargetプロパティ(EventTargetオブジェクト)にFileReaderオブジェクトが設定されているケースが考慮されていないのでしょう. そのため, この型(インターフェース)情報を補う目的で次のような記法を用いているのだと推測されます.

reader.onload = (event:Event & {target: {result:string}}) => {
this.image_path = event.target.result
} 

コードを見るに, 「引数eventはEvent型であり, かつ(&)そのtargetプロパティには『string型のプロパティresultをもつオブジェクト』が設定されている.」ことをTypeScriptコンパイラに伝えているように見えます.

Comments

[退会済みユーザー]

"かつ(&)そのtargetプロパティには『string型のプロパティresultをもつオブジェクト』が設定されている"

そうですよね...
これEvent型の引数eventのtargetにresultを追加してそれを引数として宣言してるのでしょうか
そんなことできるのかなあって疑問に思ったのと、なんか文法的にこんな書き方するんだとなんか不思議に思いました
あと"かつ"は通常&&なのかなと思ってて...
&(ビット論理積?)って何なんだろうって

[defghi1977]

そこはTypeScriptの設計者に訊くしかなかろう(引数定義についての仕様を調べるしか無い)と思います. 私はTypeScriptをほとんど知らないので, 「そんな気がする」というか素直にそう読めただけです.

[退会済みユーザー]

いや多分正しいと思います...
ありがとうございます

Answer 2

とりあえずreader.onload のコールバックを指定してるのですから
event => {
ではおかしいですよね
アロー関数で無名関数をコールバックするならせめて
(event) => {

とするところまではOKでしょうか？
そこでfilereaderのインスタンスreaderに対するonloadイベントを
受け取っているので、エラーにならなければ上記eventのtargetはresultをもっているはずです

Comments

[退会済みユーザー]

あれ、いや実は元々の書き方でもエラーを吐きながらもビルドできて正しく動いてて、ただtsでエラーが出るのが嫌だなあって思ってたんです

(event)じゃなくてeventで元々いけてました...

[yambejp]

失礼typescriptでしたね、お役に立てないようですので無視して下さい

[退会済みユーザー]

とんでもないです(>_____<)