typescript - Nuevo error de compilación de Typecript 1.8.4: “Compilación: la propiedad ''resultado'' no existe en el tipo ''EventTarget''. "

typescript1.8

Question

Soy nuevo en mecanografiado. En mi aplicación Durandal, migré a VS-2012 a VS-2015 significa mecanografiado 0.9 a mecanografiado 1.8.4. Después de migrar, obtuve tantos errores de compilación. Resolví todos esos menos uno. Estoy obteniendo un error de compilación debajo de los tipos de Eventos.

ERROR: "Compilación: la propiedad ''resultado'' no existe en el tipo ''EventTarget''"

Y el código era exactamente así a continuación:

var reader:any,
target:EventTarget;

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

"Imgsrc" está tomando evento tipo.

Funciona bien con el mecanografiado 0.9 pero con 1.8.4 es un error de lanzamiento ya que el ''resultado'' no existe en el tipo ''EventTarget''. ¿Alguien puede ayudar en esto para resolver.

Nota: "target: EventTarget" se obtiene de lib.d.ts

Answer 1

Con mi antiguo script de tipo, el parámetro "imgsrc" tiene cualquier tipo de forma predeterminada.

Entonces, ahora lo hice como (imgsrc: any). Funciona bien

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

Answer 2

El problema está en las definiciones mecanografiadas. Un truco simple es:

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

Answer 3

En lugar de usar event.target.result , puede usar FileReader.result .

Por ejemplo,

const fileReader: FileReader = new FileReader();

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

Answer 4

Este es un cambio de javascript / typecript.

lo que deberá hacer es reemplazar "event.target.result" por "this.result".

"esto" aquí se refiere al contexto de la interfaz "MSBaseReader".

a continuación están mi extracto de implementación:

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

Definición de interfaz "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;
}

Definición de interfaz "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;
}

también tenga en cuenta que, debido al cambio de contexto de "esto" dentro de "onload ()", sus definiciones basadas en clases no son accesibles dentro de "reader.onload = function (event) {..."; lo que significa que no puede usar el estilo "this.class-property" para abordar las propiedades de su clase.

Tendrá que definir la variable local. vea la definición y el uso de "perfil" en el extracto anterior.

Answer 5

Hoy esto funcionó para mí en TypeScript 2.1.1

interface EventTarget { result: any; }

Answer 6

Se puede acceder al objeto de destino como se muestra a continuación para evitar errores hasta la reparación:

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

Tratar el objetivo como un objeto Javascript

Answer 7

Si bien any es un medicamento (casi para cualquier cosa, pero ... ¿dónde está el beneficio de TypeScript entonces?) ... hay un problema similar informado y se sugiere una solución alternativa agradable (TypeScript-ish)

Solicitud para cambiar currentTarget en la interfaz de eventos para lib.d.ts

déjame citar:

Me encontré con este TS2339: la propiedad ''resultado'' no existe en el tipo ''EventTarget'' en la carga de JS FileReader, y otra advertencia para getSummary () en el evento pasó al onerror de FileReader.

Mi solución, para suprimir las horribles líneas rojas onduladas ;-) es la siguiente:

interface FileReaderEventTarget extends EventTarget {
    result:string
}

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

Luego en mi aplicación:

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

Y, hasta que haya algún cambio en lib.d.ts, seguimos trabajando con una interfaz conocida

Answer 8

Simplemente deje que TypScript sepa qué tipo esperaría que fuera.

Aquí está la solución:

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

También podría usar reader.result en este caso

Answer 9

en vez de

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

hacer

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