什么类型的Typescript类型是一个变更事件?(在Angular中)

cx6n0qe3  于 2023-03-24  发布在  TypeScript
关注(0)|答案(8)|浏览(126)

我试图弄清楚在Angular项目中使用了什么类型的Typescript类型的更改事件。
代码是这样的:

文件上传.组件.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,我应该输入什么?

sg2wtvxw

sg2wtvxw1#

这是一个事件,但是你必须将你使用的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,您可以输入这个特定的case来绕过它,但angular没有真实的的等价物。

nkcskrwz

nkcskrwz2#

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

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

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

hc2pp10m3#

你只需要在对你的事件做任何事情之前写这篇文章:

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

然后,Typescript将知道您的event.targetHTMLInputElement的示例,并且它将停止对您大喊大叫。

uxhixvfz

uxhixvfz4#

如果你是TypescriptReact用户,并且像我一样登陆了这个线程,这将对你有用:

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { 
   // do something 
}
holgip5t

holgip5t5#

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

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

vfwfrxfs

vfwfrxfs6#

接受的答案在我的编译器中抛出两个错误:(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];
}
3phpmpom

3phpmpom7#

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

bvn4nwqk

bvn4nwqk8#

eventHandler(event:React.ChangeEvent){...}

相关问题