什么 Typescript 类型是更改事件？（角度）答案

【问题标题】：What Typescript type is a change event? (In Angular)什么 Typescript 类型是更改事件？（角度）
【发布时间】：2020-01-02 03:20:39
【问题描述】：

我正在尝试找出在 Angular 项目中使用更改事件的 Typescript 类型。

代码很简单，如下所示：

file-upload.component.html

<input type="file" (change)="onChange($event)"/>

文件上传.ts

public onChange(event: Event): void {
  if (event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    console.log(file);
  }
}

将事件键入为 Event 会给我以下 Typescript linting 错误：

Property 'files' does not exist on type 'EventTarget'

如果不是Event，我应该输入什么？

【问题讨论】：

你需要调查一下 [(ngModel)] 以获得输入的参考
我认为您正在寻找让您的 event.target 改为 (event.target as HTMLInputElement).value 并且 Event 是正确的，因为从技术上讲，这是 change 的 correct interface，但无法在那一刻，所以只是一个评论。

标签： angular typescript

【解决方案1】：

你只需要在对你的事件做任何事情之前写下这个：

if (!(event.target instanceof HTMLInputElement)) return;

Typescript 会知道你的 event.target 是 HTMLInputElement 的一个实例，它会停止对你大喊大叫。

【讨论】：

【解决方案2】：

接受的答案在我的编译器中引发了两个错误：(event.target as HTMLInputElement).files is possibly 'null' 和 Type 'FileList' must have a '[Symbol.iterator]()' method that returns an iterator。

这对我有用：

const target = event.target as HTMLInputElement;

if (target.files && target.files.length) {
  const file = target.files[0];
}

【讨论】：

【解决方案3】：

您可以将Event 的属性target 指定为HTMLInputElement，使用交集类型作为event 的类型提示。

public onChange(event: Event & { target: HTMLInputElement }): void {
  if (event.target.files && event.target.files.length) {
    const [file] = event.target.files;
    console.log(file);
  }
}

交集类型将多种类型组合为一种。这允许您将现有类型添加在一起以获得具有您需要的所有功能的单一类型。

https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types

【讨论】：

不错的技巧，但是在这里您会在 html 模板中遇到编译错误：“事件”类型的参数不可分配给“事件”类型的参数 & {目标：HTMLInputElement; }'。
对，我已经在 Vue 2 上测试过了。

【解决方案4】：

public onChange(event: Event): void {
    const input = event.target as HTMLInputElement;

    if (!input.files?.length) {
        return;
    }

    const file = input.files[0];
    console.log(file);
}

【讨论】：

【解决方案5】：

这是一个事件。但是您必须将您使用的 const 转换为 HTMLInputElement。

public onChange(event: Event): void {
  if ((event.target as HTMLInputElement).files && (event.target as HTMLInputElement).files.length) {
    const [file] = event.target.files;
  }
}

唯一的另一种方法是使用 tsignore 抑制错误。在 react、flow 中，它们有一个 SyntheticEvent 类型，您可以键入这个特殊情况来绕过它，但 angular 没有真正的等价物。

【讨论】：

这确实可以消除该 TS 错误，但在第 3 行有问题：Type 'FileList' is not an array type@qt-ray
您能否将第三行中的 event.target 包装为 HTMLInputElement 并使用const files = (event.target as HTMLInputElement).files 并获取您需要的文件？如果您也愿意，我可以提供更多帮助！

【解决方案6】：

这些文件应该可以通过event.srcElement.files 属性访问。

【讨论】：

这给了我一个类似的 TS linting 错误Property 'files' does not exist on type 'Element'.