我只是想用我的KeyboardEvent做这个
var tag = evt.target.tagName.toLowerCase();
而事件。target是EventTarget类型，它不继承自Element。所以我必须像这样转换它:
var tag = (<Element>evt.target).tagName.toLowerCase();
这可能是因为一些浏览器不符合标准，对吧?TypeScript中正确的浏览器不可知实现是什么?
附注:我使用jQuery来捕获KeyboardEvent。
当前回答
来自https://stackoverflow.com/a/48443771/5515861和https://stackoverflow.com/a/58806863/5515861的答案是正确的，但我有一个更好的方法来做。例如
// in another file
export interface DOMEvent<T extends EventTarget> extends Event {
readonly target: T;
}
onFileChange(event: Event): void {
const { target } = event as DOMEvent<HTMLInputElement>;
if (target.files && target.files.length > 0) {
// do something with the target
}
}
其他回答
面向Angular 10+用户
只需声明HTML Input Element并将其扩展为使用目标作为对象，就像我下面为引导4+文件浏览器输入所做的那样。这样可以节省很多工作。
selectFile(event: Event & { target: HTMLInputElement}) {
console.log(event.target.files);
this.selectedFile = event.target.files[0];
}
@Bangonkali提供了正确的答案，但这个语法似乎更可读，对我来说更好:
eventChange($event: KeyboardEvent): void {
(<HTMLInputElement>$event.target).value;
}
您可以创建自己的扩展Event的通用接口吗?像这样的东西?
interface DOMEvent<T extends EventTarget> extends Event {
readonly target: T
}
然后你可以这样使用它:
handleChange(event: DOMEvent<HTMLInputElement>) {
this.setState({ value: event.target.value });
}
我用这个:
onClick({ target }: MouseEvent) => {
const targetElement: HTMLElement = target as HTMLElement;
const listFullHeight: number = targetElement.scrollHeight;
const listVisibleHeight: number = targetElement.offsetHeight;
const listTopScroll: number = targetElement.scrollTop;
}
3.2.4条打印稿
要检索属性，必须将目标转换为适当的数据类型:
e => console.log((e.target as Element).id)
