Свойство "файлы" не существует при ошибке типа EventTarget в typescript

Я пытаюсь получить доступ к значению входного файла из моего приложения ionic 2, но все же я столкнулся с проблемой файлов свойств, не существует в типе "EventTarget". Поскольку он правильно работает в js, но не в typescript. Код приведен ниже:

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

Пожалуйста, помогите мне решить эту проблему, поскольку она не создает мое ионное приложение.

Ответы

Ответ 1

Тип свойства e.target зависит от возвращаемого элемента getElementById(...). files является свойством элемента input: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

В этом случае компилятор TypeScript не знает, что вы возвращаете элемент input, и у нас нет класса Event для этого. Таким образом, вы можете создать такой код, как следующий код:

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

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

Ответ 2

Вы можете использовать его как HTMLInputElement:

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

Ответ 3

Самое простое решение - объявить e как any

например

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

Но вы теряете информацию о типе. Более безопасным подходом может быть объявление вашего собственного типа FileEvent на основе https://developer.mozilla.org/en-US/docs/Web/API/FileReader/onload.

Ответ 4

Это больше строк, но я думаю, что это самое ясное.

const onChange = (event: Event) => {
  const target= event.target as HTMLInputElement;
  const file: File = (target.files as FileList)[0];
  /** do something with the file **/
};