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

Posted 2023-02-22

【中文标题】Vue TypeScript 项目中事件的类型是啥？

【英文标题】：What is the type for an event in Vue TypeScript project?Vue TypeScript 项目中事件的类型是什么？

【发布时间】：2019-08-04 01:04:53

【问题描述】：

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>

【参考方案1】：

类型只是Event。相关信息在e.target 属性上。

【参考方案2】：

如果您将类型指定为Event，那么您将无法执行e.target.files[0];，因为TS 会抱怨Property 'files' does not exist on type 'target' error in typescript。最简单的解决方案是将其键入为any，在此处引用 shusson 的解决方案：Property 'files' does not exist on type 'EventTarget' error in typescript，但即使这对我也不起作用，所以我最终只是没有为特定的 Vue 组件使用 TS

【讨论】：

如果any 类型甚至不起作用，您可能试图使某些不起作用的东西起作用，可能有或没有类型。首先使用 any 是错误的，因为这样你就禁用了 Typescript 的优势。如果您打算这样做，更好的解决方案是（老实说）卸载 Typescript。

【参考方案3】：

有不同类型的事件和类型。例如，您可以使用 DragEvent 类型进行拖动操作：https://developer.mozilla.org/en-US/docs/Web/API/DragEvent。 还有 InputEvent 用于输入。 ：https://developer.mozilla.org/en-US/docs/Web/API/InputEvent. 事件更通用。