Neuer Buildfehler für Typescript 1.8.4: "Build: Eigenschaft 'Ergebnis' ist für Typ 'EventTarget' nicht vorhanden. ”

Ich bin neu im Typoskript. In meiner Durandal-Anwendung, die ich auf VS-2012 nach VS-2015 migriert habe, bedeutet Typoskript 0.9 zu Typoskript 1.8.4. Nach der Migration habe ich so viele Build-Fehler bekommen. Ich habe alle bis auf einen gelöst. Ich erhalte unten einen Build-Fehler für Ereignistypen.

FEHLER: "Build: Eigenschaft 'Ergebnis' existiert nicht für Typ 'EventTarget'"

Und der Code war genau so:

var reader:any,
target:EventTarget;

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

"Imgsrc" nimmt ein Typereignis entgegen.

Es funktioniert gut mit Typoskript 0.9, aber mit 1.8.4 wird ein Fehler ausgelöst, da 'Ergebnis' für Typ 'EventTarget' nicht vorhanden ist. Kann jemand helfen, dies zu lösen.

Hinweis: "target: EventTarget" wird von lib.d.ts abgerufen

Während anyes sich um ein Medikament handelt (fast für alles, aber ... wo ist dann der TypeScript-Vorteil) ... wird ein ähnliches Problem gemeldet und eine nette (TypesScript-artige) Problemumgehung vorgeschlagen

Anforderung zum Ändern von currentTarget in der Ereignisschnittstelle für lib.d.ts

Lassen Sie mich zitieren:

Ich bin auf diesen TS2339 gestoßen: Die Eigenschaft 'result' ist für den Typ 'EventTarget' in JS FileReader onload nicht vorhanden, und eine weitere Warnung für getSummary () für das an FileReader's onerror übergebene Ereignis.

Meine Umgehung, um die schrecklichen roten, schnörkellosen Linien zu unterdrücken ;-) ist die folgende:

interface FileReaderEventTarget extends EventTarget {
    result:string
}

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

Dann in meiner App:

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

Und bis zu einer Änderung in lib.d.ts arbeiten wir immer noch mit der bekannten Schnittstelle

EDIT Dez 2019:

Mit diesem Fix könnten Sie bekommen

Fehler TS2322: Typ '(this: FileReader, e: FileReaderEvent) => void' kann nicht dem Typ '(this: FileReader, ev: ProgressEvent) => any' zugewiesen werden.

Wenn ja, einfach ersetzen

 interface FileReaderEvent extends Event {

mit

 interface FileReaderEvent extends ProgressEvent {

Anstatt zu verwenden event.target.result, können Sie einfach verwenden FileReader.result.

Zum Beispiel,

const fileReader: FileReader = new FileReader();

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

Bei meinem alten Typenskript hat der Parameter "imgsrc" standardmäßig einen beliebigen Typ.

Also, jetzt habe ich es gemacht als (imgsrc: any). Es funktioniert gut.

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

Das Problem liegt bei den Typoskriptdefinitionen. Ein einfacher Cheat ist:

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

Lassen Sie TypScript einfach wissen, welchen Typ Sie erwarten würden.

Hier ist das Update:

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

Sie können reader.resultstattdessen auch in diesem Fall verwenden

Wenn jemand die einfachste Lösung zu finden , dann dies für mich gearbeitet.

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
}

Heute hat das bei TypeScript 2.1.1 bei mir funktioniert

interface EventTarget { result: any; }

Wenn dieser Fehler
auftritt, geben Sie 'string | ein ArrayBuffer 'kann nicht dem Typ' string 'zugewiesen werden. Der Typ 'ArrayBuffer' kann nicht dem Typ 'string' zugewiesen werden.

fileReader.result + ''; // gültiger
fileReader.result; //ungültig

Ich hatte das gleiche Problem im Winkel mit einem FileReader.

Die Lösung ist ziemlich einfach (Typescript hat den erforderlichen Typ). Du musst benutzen ProgressEvent<FileReader>. Es befindet sich im lib.dom.d.tsin der Typoskript-Installation, daher sollte es global verfügbar sein, wenn Sie mit bauen

lib: {
"dom"
}

in deinem tsconfig.json.

Hier ist der Code, in dem ich ihn verwenden musste:

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

anstatt

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

machen

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

Auf das Zielobjekt kann wie folgt zugegriffen werden, um Fehler bis zur Behebung zu vermeiden:

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

Das Ziel als Javascript-Objekt behandeln

Die oben genannten Lösungen passten nicht zu meinem ähnlichen Problem mit IndexedDB, daher dachte ich, ich würde mitteilen, was in meinem Szenario funktioniert hat. Durch Ändern der (event)Funktionsargumente in konnte (event: any)ich die Typfehler ignorieren.

Beispielcode:

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

Dies ist eine Unterbrechungsänderung von Javascript / Typoskript.

Sie müssen lediglich "event.target.result" durch "this.result" ersetzen.

"this" bezieht sich hier auf den Kontext der Schnittstelle "MSBaseReader".

Unten ist mein Implementierungsauszug:

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

Definition der "MSBaseReader" -Schnittstelle:

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

Definition der "FileReader" -Schnittstelle

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

Beachten Sie auch, dass aufgrund der Kontextänderung von "this" in "onload ()" auf Ihre klassenbasierten Definitionen in "reader.onload = function (event) {..." nicht zugegriffen werden kann. Dies bedeutet, dass Sie den Stil "this.class-property" nicht verwenden können, um Ihre Klasseneigenschaften zu adressieren.

Sie müssen eine lokale Variable definieren. Siehe die Definition und Verwendung von "Profil" im obigen Auszug.

Versuche dies.

event.target["result"]