ChatGPT解决这个技术问题 Extra ChatGPT

新的 Typescript 1.8.4 构建错误:“构建:‘EventTarget’类型上不存在属性‘结果’。”

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

错误:“构建:‘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 中它会抛出错误,因为在“EventTarget”类型上不存在“result”。任何人都可以帮助解决这个问题。

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


K
KimchiMan

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

例如,

const fileReader: FileReader = new FileReader();

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

无法解析为 json :(
@KimchiMan .. 太好了...你能解释一下怎么做吗?
如果出现此错误
键入 'string | ArrayBuffer' 不可分配给类型 'string'。类型 'ArrayBuffer' 不可分配给类型 'string'
> fileReader.result;+'';
这应该是公认的答案,干净且不涉及黑客
实际上它的 ProgressEvent<FileReader> 而不仅仅是 Event...
S
Salketer

虽然 any 是一种药物(几乎适用于任何东西,但是...TypeScript 的好处在哪里)...报告了一个类似的问题并且很好 (TypesScript-ish) 建议的解决方法

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

让我引用:

我遇到了这个 TS2339:属性 'result' 在 JS FileReader onload 中的类型 'EventTarget' 上不存在,并且对传递给 FileReader 的 onerror 的事件的 getSummary() 发出另一个警告。我的解决方法是抑制可怕的红色波浪线;-) 如下: interface FileReaderEventTarget extends EventTarget { result:string } interface FileReaderEvent extends Event { target: FileReaderEventTarget;获取消息():字符串;然后在我的应用程序中: reader.onload = function(fre:FileReaderEvent) { var data = JSON.parse(fre.target.result); ... }

而且,在 lib.d.ts 发生一些变化之前,我们仍然使用已知接口

编辑 2019 年 12 月:

有了这个修复,你可能会得到

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

如果是这样,只需更换

 interface FileReaderEvent extends Event {

 interface FileReaderEvent extends ProgressEvent {

截至 2018 年 4 月下旬仍未修复
截至 2018 年 6 月上旬仍未修复
仍然不固定。 2018 年 10 月。
仍然不固定。 2018 年 11 月 4 日
截至 2019 年 1 月仍未修复
R
Rayudu

使用我的旧类型脚本,参数“imgsrc”默认为任何类型。

所以,现在我把它设为 (imgsrc:any)。它工作正常。

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

t
tika

问题在于打字稿定义。一个简单的作弊方法是:

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

d
dehart

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

这是修复:

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

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


这是最好的解决方案
M
Melroy Fernandes

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

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
}

E
Elcio Mauro Guimarães

今天这在 TypeScript 2.1.1 对我有用

interface EventTarget { result: any; }

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

如果出现此错误,请键入 'string | ArrayBuffer' 不可分配给类型 'string'。类型“ArrayBuffer”不可分配给类型“字符串”

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


L
Lukas Kurz

我在使用 FileReader 时遇到了同样的问题。

解决方案相当简单(Typescript 具有必要的类型)。您必须使用 ProgressEvent<FileReader>。它可以在 typescript 安装中找到 im 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);
}


D
Dawit

代替

    this.localDbRequest.onsuccess = function (event) {
      const db = event.target.result;
    };

   this.localDbRequest.onsuccess = function (event) {
     const db = this.result;
   };

K
Keegan Cruickshank

可以按如下方式访问目标对象以防止错误,直到修复:

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

将目标视为 Javascript 对象


K
Katrpilar

上述解决方案不适合我与 IndexedDB 的类似问题,所以我想我会分享在我的场景中有效的方法。通过将 (event) 函数的参数更改为 (event: any),我能够忽略类型错误。

示例代码:

let request = window.indexedDB.open('userChannels', 3);

request.onerror = function(event: any ) {
    console.log('ERROR: Failed to create userChannels local DB' + event.target.errorCode)
  };

request.onsuccess = function(event: any) {
   let db = event.target.result;
   console.log('SUCCESS: Created userChannels local DB')
};

M
Michal.S

lib.dom.d.ts 分析后很简单:

const fileReader: FileReader = new FileReader();

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

G
George Wang

这是 javascript/typescript 的一个突破性变化。

您需要做的就是将“event.target.result”替换为“this.result”。

这里的“this”指的是接口“MSBaseReader”的上下文。

以下是我的实现摘录:

      let reader = new FileReader();
      let profile: TransProfile = new TransProfile();

      reader.onload = function(event){
        profile.avatar = new Uint8Array(this.result);
      }

      reader.onerror = function(event){
      }

      this.photoLib.getPhoto(item)
        .then(blob => reader.readAsArrayBuffer(blob))
        .then(() => this.doUpload(profile));

“MSBaseReader”接口定义:

interface MSBaseReader {
    onabort: (this: MSBaseReader, ev: Event) => any;
    onerror: (this: MSBaseReader, ev: ErrorEvent) => any;
    onload: (this: MSBaseReader, ev: Event) => any;
    onloadend: (this: MSBaseReader, ev: ProgressEvent) => any;
    onloadstart: (this: MSBaseReader, ev: Event) => any;
    onprogress: (this: MSBaseReader, ev: ProgressEvent) => any;
    readonly readyState: number;
    readonly result: any;
    abort(): void;
    readonly DONE: number;
    readonly EMPTY: number;
    readonly LOADING: number;
    addEventListener<K extends keyof MSBaseReaderEventMap>(type: K, listener: (this: MSBaseReader, ev: MSBaseReaderEventMap[K]) => any, useCapture?: boolean): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

“FileReader”接口定义

interface FileReader extends EventTarget, MSBaseReader {
    readonly error: DOMError;
    readAsArrayBuffer(blob: Blob): void;
    readAsBinaryString(blob: Blob): void;
    readAsDataURL(blob: Blob): void;
    readAsText(blob: Blob, encoding?: string): void;
    addEventListener<K extends keyof MSBaseReaderEventMap>(type: K, listener: (this: FileReader, ev: MSBaseReaderEventMap[K]) => any, useCapture?: boolean): void;
    addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;
}

另请注意,由于“onload()”中“this”的上下文更改,您的基于类的定义无法在“reader.onload = function(event){...”中访问;这意味着您不能使用“this.class-property”样式来处理您的类属性。

您将必须定义局部变量。请参阅上面摘录中“配置文件”的定义和用法。


Y
YouBee

尝试这个。

event.target["result"]

虽然此代码可能会解决 OP 的问题,但最好包括说明您的代码如何解决 OP 的问题。通过这种方式,未来的访问者可以从您的帖子中学习,并将其应用到他们自己的代码中。 SO 不是编码服务,而是知识资源。此外,高质量、完整的答案更有可能得到支持。这些功能,以及所有帖子都是独立的要求,是 SO 作为一个平台的一些优势,使其与论坛区分开来。您可以编辑以添加其他信息和/或使用源文档补充您的解释。