angular - getdata - ionic import js

Los ''archivos'' de propiedad no existen en el tipo ''EventTarget'' error en mecanografía

Question

Estoy tratando de acceder al valor del archivo de entrada desde mi aplicación ionic 2 pero aún estoy enfrentando el problema de que los archivos de propiedades no existen en el tipo ''EventTarget''. Como funciona correctamente en js pero no en mecanografiado. El código se da a continuación:

  document.getElementById("customimage").onchange= function(e?) {
            var files: any = e.target.files[0]; 
              EXIF.getData(e.target.files[0], function() {
                  alert(EXIF.getTag(this,"GPSLatitude"));
              });
          }

Ayúdame a resolver este problema, ya que no está compilando mi aplicación ionic 2.

Answer 1

El tipo de propiedad e.target depende del elemento que está devolviendo en getElementById(...) . files es una propiedad del elemento de input : https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

En este caso, el compilador de TypeScript no sabe que está devolviendo un elemento de input y no tenemos una clase de Event específica para esto. Entonces, puedes crear uno como el siguiente código:

interface HTMLInputEvent extends Event {
    target: HTMLInputElement & EventTarget;
}

document.getElementById("customimage").onchange = function(e?: HTMLInputEvent) {
    let files: any = e.target.files[0]; 
    //...
}

Answer 2

La solución más simple es declarar e como any

p.ej

document.getElementById(''customimage'').onchange = (e: any) => {
    let files = e.target.files[0];
    ...
};

Pero se pierde información de tipo. Un enfoque más seguro podría ser declarar su propio tipo de FileEvent basado en https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload .

Answer 3

Puedes lanzarlo como HTMLInputElement :

document.getElementById("customimage").onchange= function(e: Event) {
    let file = (<HTMLInputElement>e.target).files[0];
    //rest of your code...
}