新的 Typescript 1.8.4 构建错误：“构建：类型 'EventTarget' 上不存在属性 'result'。”

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

提问by Rayudu

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.

我是打字稿的新手。在我的 Durandal 应用程序中，我迁移到 VS-2012 到 VS-2015 意味着 typescript 0.9 到 typescript 1.8.4。迁移后，我遇到了很多构建错误。我解决了除一个之外的所有问题。我遇到以下事件类型的构建错误。

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

错误：“构建：属性 'result' 不存在于类型 '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.

“Imgsrc”正在拍摄类型事件。

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.

它在 typescript 0.9 中工作正常，但在 1.8.4 中它会抛出错误，因为类型“EventTarget”上不存在“result”。任何人都可以帮助解决这个问题。

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

注意：“target:EventTarget”来自 lib.d.ts

采纳答案by Radim K?hler

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

虽然any是一种药物（几乎可以用于任何事情，但是……TypeScript 的好处在哪里）……报告了一个类似的问题，并且建议了很好的（TypesScript-ish）解决方法

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

请求更改 lib.d.ts 事件接口中的 currentTarget

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);
    ...
}

我遇到了这个 TS2339：属性 'result' 在 JS FileReader onload 中的类型 'EventTarget' 上不存在，并且在传递给 FileReader 的 onerror 的事件上的 getSummary() 的另一个警告。

我的解决方法是抑制可怕的红色波浪线；-) 如下：

interface FileReaderEventTarget extends EventTarget {
    result:string
}

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

然后在我的应用程序中：

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

而且，直到 lib.d.ts 发生一些变化，我们仍然使用已知的接口

EDIT Dec 2019:

2019 年 12 月编辑：

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

错误 TS2322：类型 '(this: FileReader, e: FileReaderEvent) => void' 不可分配给类型 '(this: FileReader, ev: ProgressEvent) => any'。

If so, just replace

如果是这样，只需更换

 interface FileReaderEvent extends Event {

with

和

 interface FileReaderEvent extends ProgressEvent {

回答by KimchiMan

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

而不是使用event.target.result，您可以只使用FileReader.result.

For example,

例如，

const fileReader: FileReader = new FileReader();

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

回答by Rayudu

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

使用我的旧类型脚本，默认情况下参数“imgsrc”具有任何类型。

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

所以，现在我把它做成 (imgsrc:any)。它工作正常。

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

回答by tika

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;

回答by de hart

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

只需让 TypScript 知道您希望它是什么类型即可。

Here is the fix:

这是修复：

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

You could also use reader.resultinstead in this case

reader.result在这种情况下，您也可以改用

回答by Melroy Fernandes

If anyone is finding the simplest solution then thisworked for me.

如果有人找到最简单的解决方案，那么 这对我有用。

var reader:any,
target:EventTarget;
reader= new FileReader();
reader.onload = function (imgsrc){
//var fileUrl = imgsrc.target.result; //change to
var fileUrl = (imgsrc.target as FileReader).result; //cast to correct type
}

回答by Elcio Mauro Guimar?es

Today this worked for me at TypeScript 2.1.1

今天这在 TypeScript 2.1.1 对我有用

interface EventTarget { result: any; }

回答by Maravarman Manoharan

If this error comes
Type 'string | ArrayBuffer' is not assignable to type 'string'. Type 'ArrayBuffer' is not assignable to type 'string'

如果出现此错误，请
键入 'string | ArrayBuffer' 不可分配给类型 'string'。类型 'ArrayBuffer' 不能分配给类型 'string'

fileReader.result+' ';//valid
fileReader.result; //invalid

fileReader.result+' ';//有效的
fileReader.result; //无效的

回答by Keegan Cruickshank

The targetobject can be accessed as below to prevent error until fix:

所述目标对象可如下以防止错误，直到修复来访问：

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

Treating the target as a Javascript Object

将目标视为 Javascript 对象

回答by Lukas Kurz

I had the same issue in angular with a FileReader.

我在 angular 方面遇到了同样的问题FileReader。

The solution is rather simple (Typescript has the necessary type). You have to use ProgressEvent<FileReader>. It can be found im lib.dom.d.tsin the typescript installation, so it should be globally availabe if you build with

解决方案相当简单（Typescript 具有必要的类型）。你必须使用ProgressEvent<FileReader>. 它可以lib.dom.d.ts在打字稿安装中找到，所以如果你用

lib: {
"dom"
}

in your tsconfig.json.

在您的tsconfig.json.

Here is the code where i had to use it:

这是我必须使用它的代码：

function read(file: File) {
  const fileReader = new FileReader();
  fileReader.onloadend = function (e: ProgressEvent<FileReader>) {
    const arr = (new Uint8Array(parseInt(e.target.result.toString(), 10))).subarray(0, 4);
    var header = "";
    for (var i = 0; i < arr.length; i++) {
      header += arr[i].toString(16);
    }
    console.log(header);

    // Check the file signature against known types

  };
  fileReader.readAsArrayBuffer(file);
}