属性'nodeName'在类型 'EventTarget' 上不存在

Question

下面的代码检查用户是在输入区、文本区还是可内容区。如果是这种情况，keys应该清空，代码应该停止。

let keys: any[] = []
document.addEventListener('keypress', event => {
if (event.key === ' ') return
if (event.target === null) return // Should remove this?
if (event.target.nodeName === 'INPUT' ||
event.target.nodeName === 'TEXTAREA' ||
event.target.isContentEditable) {
keys = []
return
}
})
console.log(keys)

我得到这个TypeScript错误:

Property 'nodeName' does not exist on type 'EventTarget'.
Property 'nodeName' does not exist on type 'EventTarget'.
Property 'isContentEditable' does not exist on type 'EventTarget'.

为什么会这样?如何解决?

Live code: https://codesandbox.io/s/cover-image-forked-7n8z7w?file=/src/index.ts

Answer 1

EventTarget不能保证是HTMLElement甚至是Node

你可以用

代替你的第二个条件

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

Answer 2

事件目标可以包括像xhr请求和web worker这样的东西，所以Typescript正确地不会让你假设它是一个DOM节点。

一旦你意识到这一点，它就变成了一个通过运行时检查来缩小类型的问题，这些检查对编译器来说是清晰的。

document.addEventListener('keypress', (evt: KeyboardEvent) => {
const { target } = evt;
// Note e.g. XHR requests can be event targets, no nodeName
if (target instanceof HTMLElement) {
console.log(target.nodeName);
if (target.isContentEditable) {
// now we're good to process as e.g. textarea
}
}
});

游乐场