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

Question

我对TypeScript还不熟悉。在我的Durandal应用程序中，我从VS-2012迁移到了VS-2015，也就是从TypeScript 0.9升级到了TypeScript 1.8.4。迁移后，我遇到了许多构建错误。除了一个错误外，我已经解决了所有问题。我在Events类型上得到以下构建错误：

错误："Build:属性“result”在类型“EventTarget”上不存在"

而代码完全如下所示：

var reader:any,
target:EventTarget;

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

"Imgsrc"正在进行类型事件绑定。

它在typescript 0.9中运行良好，但在1.8.4中会抛出错误，错误为“'result'不存在于类型“EventTarget”上。”是否有人可以帮忙解决这个问题。

注意：“target:EventTarget”是从lib.d.ts获取的。

- Rayudu

Answer 1

< p>不必使用event.target.result，您可以直接使用FileReader.result。

例如，

const fileReader: FileReader = new FileReader();

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

- KimchiMan

---

无法解析为 JSON :( - roadev

@KimchiMan.. 很棒... 你能解释一下怎么做吗？ - Dila Gurung

如果出现以下错误<br> 类型“string | ArrayBuffer”不能分配给类型“string”。类型“ArrayBuffer”不能分配给类型“string” <br/>

fileReader.result;+'';

- Maravarman Manoharan

这应该是被接受的答案，干净而且没有涉及任何黑客技巧。 - Bogdan Ionitza

实际上，它是 ProgressEvent<FileReader> 而不仅仅是 Event... - Melroy van den Berg

如果你遇到了这个错误 - 'Type 'string | ArrayBuffer' is not assignable to type 'string' '，你可以按照这里提供的方式进行类型转换 https://dev59.com/ylQJ5IYBdhLWcg3wlm7B#54089823 - Pallavi

Answer 2

虽然 any 是一种药物 (几乎可以治疗任何东西，但是......那TypeScript的好处在哪里呢)... 有一个类似的问题被报告并提供了一个不错的(类似于TypeScript)解决方法

请求更改Event接口中currentTarget的类型为lib.d.ts

让我引用一下:

我遇到了这个TS2339：JS FileReader onload上的Property 'result'不存在于类型'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);
    ...
}

直到lib.d.ts发生变化，我们仍然使用已知的接口进行工作。

2019年12月的更新：

如果出现此错误，请将以下内容替换。

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

 interface FileReaderEvent extends Event {

随着

 interface FileReaderEvent extends ProgressEvent {

- Radim Köhler

---

截至2018年6月初仍未修复。 - b00r00x0

仍未修复。2018年10月。 - Jeff Huijsmans

仍未修复。 2018年11月4日 - Dawit

截至2019年1月仍未修复。 - Victor Fernandes

截至2020年1月仍未修复。 - Benny Bottema

Answer 3

在我的旧TypeScript中，“imgsrc”参数默认为任何类型。

所以，现在我将它设置为（imgsrc：any）。它可以正常工作。

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

- Rayudu

Answer 4

问题出在 TypeScript 定义上。一个简单的方法是：

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

- tika

Answer 5

只需让 TypeScript 知道您期望的类型即可。

这是修复办法：

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

您在这种情况下也可以使用reader.result。

- dehart

---

这是最佳解决方案。 - Adam Schneider

Answer 6

如果有人正在寻找最简单的解决方案，那么这个对我有效。

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
}

- Melroy Fernandes

Answer 7

在对lib.dom.d.ts进行分析后，它很简单：

const fileReader: FileReader = new FileReader();

fileReader.onload = (event: ProgressEvent<FileReader>) => {
   event.target.result; // This is valid
};

- Michal.S

Answer 8

今天在TypeScript 2.1.1版本中，这个方法对我有效。

interface EventTarget { result: any; }

- Elcio Mauro Guimarães

---

不错的解决方案，但是当我重新启动解决方案时，在 lib.d.ts 中出现了许多错误。它与真实的 EventTarget 接口发生了冲突。 - Revils

Answer 9

如果出现此错误
类型“string | ArrayBuffer”不能分配给类型“string”。类型“ArrayBuffer”不能分配给类型“string”

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

- Maravarman Manoharan

Answer 10

我在angular中遇到了同样的问题，涉及到FileReader。

解决方案相当简单（Typescript有必要的类型）。您需要使用ProgressEvent<FileReader>。它可以在typescript安装的lib.dom.d.ts中找到，因此如果您构建时应该是全局可用的。

lib: {
"dom"
}

在你的 tsconfig.json 中使用它。

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

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

- Lukas Kurz