Vue TypeScript 项目中事件的类型是什么？

Question

在uploadImage 函数参数中，'e' 的正确类型是什么？

public uploadImage(e /* :type of e */){
 const image = e.target.files[0];
 const reader = new FileReader();
 reader.readAsDataURL(image);
 reader.onload = e =>{
    this.previewImage = e.target.result;
    console.log(this.previewImage);
 };
}

在模板中我有这个

<input type="file" accept="image/jpeg" @change=uploadImage>

Answer 1

您可以对此类型使用您的自我注释。

interface InputFileEvent extends Event {
    target: HTMLInputElement;
}

public uploadImage(e: InputFileEvent) {
    const image = e.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(image);
    reader.onload = e =>{
        this.previewImage = e.target.result;
        console.log(this.previewImage);
   };
}

Answer 2

类型只是Event. 相关信息是关于e.target财产。

Answer 3

显然我迟到了，但我正在重写一些遗留组件。最后我遇到了 Typescript 错误 - 模板事件不喜欢我直接解构，因为 was target、EventTargetnotHTMLInputElement或任何我需要的给定元素。

因此，我没有直接解构参数，而是使用as关键字将其设置为变量。

例子：

foo(event: Event) {
  const el = event.target as HTMLInputElement
  // do stuff
}

我希望我知道一些方便的技巧，可以直接使用正确的类型从参数中解构它，但可惜我没有那么幸运。