New Typescript 1.8.4 build error: " Build: Property 'result' does not exist on type 'EventTarget'. "

Question

I am New to typescript. In my Durandal application I migrated to VS-2012 to VS-2015 means typescript 0.9 to typescript 1.8.4. After migrated I got so many build errors. I resolved all those except one. I am getting below build error on types of Events.

ERROR: " Build: Property 'result' does not exist on type 'EventTarget' "

And the code was exactly like this below:

var reader:any,
target:EventTarget;

reader= new FileReader();
reader.onload = function (imgsrc){
    var fileUrl = imgsrc.target.result;
}

"Imgsrc" is taking type event.

It's working fine with typescript 0.9 but with 1.8.4 it's throwing error as 'result' does not exist on type 'EventTarget'. Can any one help on this to resolve.

Note: "target:EventTarget" is getting from lib.d.ts

Solution 1

While any is a medicine (almost for anything, but... where is the TypeScript benefit then)... there is a similar issue reported and nice (TypesScript-ish) workaround suggested

Request to change currentTarget in Event interface for lib.d.ts

let me cite:

I ran into this TS2339: Property 'result' does not exist on type 'EventTarget' in JS FileReader onload, and another warning for getSummary() on the event passed to FileReader's onerror.

My work-around, to suppress the horrid red squiggily lines;-) is the following:

interface FileReaderEventTarget extends EventTarget {
    result:string
}

interface FileReaderEvent extends Event {
    target: FileReaderEventTarget;
    getMessage():string;
}

Then in my app:

reader.onload = function(fre:FileReaderEvent) {
    var data = JSON.parse(fre.target.result);
    ...
}

And, until some change in lib.d.ts, we still do work with known interface

EDIT Dec 2019:

With this fix, you might be getting

error TS2322: Type '(this: FileReader, e: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: ProgressEvent) => any'.

If so, just replace

 interface FileReaderEvent extends Event {

with

 interface FileReaderEvent extends ProgressEvent {

Solution 2

Instead of using event.target.result, you can just use FileReader.result.

For example,

const fileReader: FileReader = new FileReader();

fileReader.onload = (event: Event) => {
   event.target.result; // This is invalid
   fileReader.result; // This is valid
};

Solution 3

With my old type script the parameter "imgsrc" is having any type by default.

So, now I made it as (imgsrc:any). It's working fine.

var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc:any){
var fileUrl = imgsrc.target.result;
}

Solution 4

The issue is with the typescript definitions. A simple cheat is:

let target: any = e.target; //<-- This (any) will tell compiler to shut up!
let content: string = target.result;

Solution 5

Just let TypScript know what type you would expect it to be.

Here is the fix:

let reader = new FileReader();
reader.onload = function (event){
    let fileUrl = (<FileReader>event.target).result;
}

You could also use reader.result instead in this case

View more solutions

Comments

[Revils]

Nice solution, however when I restarted the solution it gives many errors in the lib.d.ts. It collides with the real EventTarget interface.

[Fergal Moran]

Still unfixed as of late April 2018

[b00r00x0]

Still unfixed as of early June 2018

[Sam]

Still unfixed as of late July 2018

[Azoulay Jason]

Still unfixed as of late August 2018

[Jeff Huijsmans]

Still unfixed. October 2018.

[Dawit]

still unfixed. Nov 4,2018

[roadev]

can't parse as a json :(

[Victor Fernandes]

Still unfixed as of Jan 2019

[Stack Underflow]

I needed to use ArrayLike<number> instead of string in the FileReaderEventTarget interface.

[Dila Gurung]

@KimchiMan.. Great ... Can you explain how.?

[TSR]

Still unfixed as of March 2019

[Stephan Schinkel]

Still unfixed as of May 2019

[Tonio]

Still unfixed. July 2019

[Adam Schneider]

This is the best solution

[x7R5fQ]

Still unfixed. Sept 2019

[Maravarman Manoharan]

If this error comes<br> Type 'string | ArrayBuffer' is not assignable to type 'string'. Type 'ArrayBuffer' is not assignable to type 'string' <br/> > fileReader.result;+'';

[Kobe]

Still unfixed. Oct 2019

[Bogdan Ionitza]

this should be the accepted answer, clean and no hacks involved

[Akhil]

Still unfixed as of Jan 2019

[Melroy van den Berg]

Still not fixed as of 19 Nov 2019 :(

[Melroy van den Berg]

Actually its ProgressEvent<FileReader> and not just Event...

[Vincent]

No need to create your own interface. You can use FileReader (which extends EventTarget) from lib.dom.ts to cast the event

[Salketer]

Added a slight tweak that may be needed for some (just like for me)

[Benny Bottema]

Still unfixed as of Jan 2020

[Pablo Servin]

Still unfixed as of April 2020

[AnthonyOSX]

Still unfixed as of May 2020

[DHRUV GAJWA]

Still unfixed as of June 2020

[ysf]

While this code may resolve the OP's issue, it is best to include an explanation as to how your code addresses the OP's issue. In this way, future visitors can learn from your post, and apply it to their own code. SO is not a coding service, but a resource for knowledge. Also, high quality, complete answers are more likely to be upvoted. These features, along with the requirement that all posts are self-contained, are some of the strengths of SO as a platform, that differentiates it from forums. You can edit to add additional info &/or to supplement your explanations with source documentation.

[John R.]

Still unfixed as of July 2020

[user8380672]

Still unfixed as of August 2020

[Krzysztof Podmokły]

Still unfixed as of Jan 2021

[Pallavi]

And if you get this error - 'Type 'string | ArrayBuffer' is not assignable to type 'string' ' you can simply typecast as provided here stackoverflow.com/a/54089823/13596406

[Toxy]

Still unfixed as of Sep 2021

[denifer santiago fernandez]

Still unfixed as of Jan 2022