我试图弄清楚在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
,我应该输入什么?
8条答案
按热度按时间sg2wtvxw1#
这是一个事件,但是你必须将你使用的const转换为HTMLInputElement。
唯一的另一种方法是使用tsignore来抑制错误。在react,flow中,它们有一个类型SyntheticEvent,您可以输入这个特定的case来绕过它,但angular没有真实的的等价物。
nkcskrwz2#
hc2pp10m3#
你只需要在对你的事件做任何事情之前写这篇文章:
然后,Typescript将知道您的
event.target
是HTMLInputElement
的示例,并且它将停止对您大喊大叫。uxhixvfz4#
如果你是Typescript和React用户,并且像我一样登陆了这个线程,这将对你有用:
holgip5t5#
您可以将
Event
的属性target
指定为HTMLInputElement
,使用交集类型作为event
的typehint。交叉类型将多个类型组合为一个。这允许您将现有类型添加到一起,以获得具有所需所有功能的单个类型。
https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html#intersection-types
vfwfrxfs6#
接受的答案在我的编译器中抛出两个错误:
(event.target as HTMLInputElement).files is possibly 'null'
和Type 'FileList' must have a '[Symbol.iterator]()' method that returns an iterator
。这对我很有效:
3phpmpom7#
这些文件应该可以通过
event.srcElement.files
属性访问。bvn4nwqk8#
eventHandler(event:React.ChangeEvent){...}