我只是想用我的KeyboardEvent做这个

var tag = evt.target.tagName.toLowerCase();

而事件。target是EventTarget类型,它不继承自Element。所以我必须像这样转换它:

var tag = (<Element>evt.target).tagName.toLowerCase();

这可能是因为一些浏览器不符合标准,对吧?TypeScript中正确的浏览器不可知实现是什么?

附注:我使用jQuery来捕获KeyboardEvent。


当前回答

@Bangonkali提供了正确的答案,但这个语法似乎更可读,对我来说更好:

eventChange($event: KeyboardEvent): void {
    (<HTMLInputElement>$event.target).value;
}

其他回答

对于typescript,我们可以利用类型别名,如下所示:

type KeyboardEvent = {
  target: HTMLInputElement,
  key: string,
};
const onKeyPress = (e: KeyboardEvent) => {
  if ('Enter' === e.key) { // Enter keyboard was pressed!
    submit(e.target.value);
    e.target.value = '';
    return;
  }
  // continue handle onKeyPress input events...
};

来自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
    }
  }

您可以创建自己的扩展Event的通用接口吗?像这样的东西?

interface DOMEvent<T extends EventTarget> extends Event {
  readonly target: T
}

然后你可以这样使用它:

handleChange(event: DOMEvent<HTMLInputElement>) {
  this.setState({ value: event.target.value });
}

@Bangonkali提供了正确的答案,但这个语法似乎更可读,对我来说更好:

eventChange($event: KeyboardEvent): void {
    (<HTMLInputElement>$event.target).value;
}

3.2.4条打印稿

要检索属性,必须将目标转换为适当的数据类型:

e => console.log((e.target as Element).id)