web-dev-qa-db-fra.com

Nouvelle erreur de génération TypeScript 1.8.4: "La construction: la propriété 'résultat' n'existe pas sur le type 'EventTarget'."

Je suis nouveau sur TypeScript. Dans mon application Durandal, j'ai migré de VS-2012 à VS-2015, ce qui signifie TypeScript 0.9 à TypeScript 1.8.4. Après la migration, j'ai eu tellement d'erreurs de construction. J'ai résolu tous ceux sauf un. Je reçois une erreur de construction ci-dessous sur les types d'événements.

ERREUR: "La construction: la propriété 'résultat' n'existe pas sur le type 'EventTarget'"

Et le code était exactement comme ci-dessous:

var reader:any,
target:EventTarget;

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

"Imgsrc" prend un événement de type.

Cela fonctionne très bien avec TypeScript 0.9 mais avec 1.8.4 c'est une erreur de projection car "result" n'existe pas sur le type "EventTarget". Peut-on aider à résoudre ce problème?.

Remarque: "target: EventTarget" provient de lib.d.ts

typescripttypescript1.8
44
Rayudu

Bien que any soit un médicament (presque pour quoi que ce soit, mais ... où est l'avantage de TypeScript alors)} ... un problème similaire a été signalé et Nice (TypesScript-ish) solution de contournement suggérée

Demande de modification de currentTarget dans l'interface d'événement pour lib.d.ts

laissez-moi citer:

J'ai rencontré ce TS2339: La propriété 'résultat' n'existe pas sur le type 'EventTarget' dans JS FileReader onload et un autre avertissement pour getSummary () sur l'événement transmis à l'erreur sur FileReader.

Mon travail, pour supprimer les lignes ondulées rouges horribles ;-) est le Suivant:

interface FileReaderEventTarget extends EventTarget {
    result:string
}

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

Puis dans mon application:

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

Et, jusqu'à ce que quelque chose change dans lib.d.ts, nous travaillons toujours avec une interface connue

53
Radim Köhler

Avec mon ancien script de type, le paramètre "imgsrc" a n'importe quel type par défaut.

Donc, maintenant je l'ai fait comme (imgsrc: any). Ça fonctionne bien.

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

Au lieu d'utiliser event.target.result, vous pouvez simplement utiliser FileReader.result.

Par exemple,

const fileReader: FileReader = new FileReader();

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

Le problème concerne les définitions TypeScript. Une simple triche c'est:

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

Laissez simplement TypeScript savoir quel type vous vous attendez à ce qu'il soit.

Voici le correctif:

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

Vous pouvez également utiliser reader.result à la place dans ce cas

4
Michael de Hart

Aujourd'hui, cela a fonctionné pour moi à TypeScript 2.1.1

interface EventTarget { result: any; }
3
Elcio Mauro Guimarães

L’objet cible est accessible comme ci-dessous pour éviter toute erreur jusqu’à résolution:

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

Traiter la cible comme un objet Javascript

1
Keegan Cruickshank

au lieu de 

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

faire

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

c'est un changement de rupture de javascript/TypeScript.

ce que vous devez faire est de simplement remplacer "event.target.result" par "this.result". 

"ceci" fait ici référence au contexte de l'interface "MSBaseReader".

ci-dessous sont mon extrait d'implémentation:

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

Définition de l'interface "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;
}

Définition de l'interface "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;
}

notez également qu'en raison du changement de contexte de "this" dans "onload ()", vos définitions basées sur les classes ne sont pas accessibles dans "reader.onload = function (event) {..."; ce qui signifie que vous ne pouvez pas utiliser le style "this.class-property" pour traiter les propriétés de votre classe.

vous devrez définir une variable locale. voir la définition et l'utilisation de "profil" dans l'extrait ci-dessus.

0
George Wang