我只是想用我的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
}
}
其他回答
对于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...
};
JLRishe的答案是正确的，所以我只是在我的事件处理程序中使用这个:
if (event.target instanceof Element) { /*...*/ }
使用typescript，我使用了一个只适用于我的函数的自定义接口。示例用例。
handleChange(event: { target: HTMLInputElement; }) {
this.setState({ value: event.target.value });
}
在这种情况下，handleChange将接收一个目标字段为HTMLInputElement类型的对象。
在后面的代码中，我可以使用
<input type='text' value={this.state.value} onChange={this.handleChange} />
更清晰的方法是将接口放到一个单独的文件中。
interface HandleNameChangeInterface {
target: HTMLInputElement;
}
然后使用下面的函数定义:
handleChange(event: HandleNameChangeInterface) {
this.setState({ value: event.target.value });
}
在我的用例中，明确定义了handleChange的唯一调用者是输入文本的HTML元素类型。
我用这个:
onClick({ target }: MouseEvent) => {
const targetElement: HTMLElement = target as HTMLElement;
const listFullHeight: number = targetElement.scrollHeight;
const listVisibleHeight: number = targetElement.offsetHeight;
const listTopScroll: number = targetElement.scrollTop;
}
在处理来自输入字段的事件时，我通常会遇到这个问题，比如key up。但是请记住，事件可以起源于任何地方，例如文档上的keyup侦听器，其中没有关联的值。所以为了正确地提供信息，我提供了一个额外的类型:
interface KeyboardEventOnInputField extends KeyboardEvent {
target: HTMLInputElement;
}
...
onKeyUp(e: KeyboardEventOnInputField) {
const inputValue = e.target.value;
...
}
如果函数的输入类型是Event，你可能需要告诉typescript它实际上是什么:
onKeyUp(e: Event) {
const evt = e as KeyboardEventOnInputField;
const inputValue = evt.target.value;
this.inputValue.next(inputValue);
}
例如，这在Angular中是必需的。
