TypeScript报错：EventTarget无nodeName等属性的原因与修复方案

问题代码 #

let keys: any[] = []

document.addEventListener('keypress', event => {
  if (event.key === ' ') return
  if (event.target === null) return // 是否应移除该行？
  if (event.target.nodeName === 'INPUT' ||
    event.target.nodeName === 'TEXTAREA' ||
    event.target.isContentEditable) {
    keys = []
    return
  }
})

console.log(keys)

报错信息 #

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

错误原因 #

TypeScript里event.target的默认类型是EventTarget，这是一个通用的事件目标类型，它不一定是DOM元素（比如可能是window、document等对象，甚至null），因此默认不包含nodeName、isContentEditable这些仅DOM元素才有的属性，直接访问会触发类型检查错误。

另外，if (event.target === null) return这行不需要移除，因为根据DOM规范，某些场景下event.target确实可能为null，保留它能避免后续空值访问的潜在问题。

修复方案 #

需要先将event.target的类型缩小为DOM元素类型，再访问对应的属性，这里提供两种常用方式：

方式1：类型断言 + 空值检查 #

先确认event.target不为null，再将其断言为HTMLElement（包含所有DOM元素的通用类型）：

let keys: any[] = []

document.addEventListener('keypress', event => {
  if (event.key === ' ') return
  const target = event.target
  if (target === null) return
  // 断言为HTMLElement
  const element = target as HTMLElement
  if (element.nodeName === 'INPUT' ||
    element.nodeName === 'TEXTAREA' ||
    element.isContentEditable) {
    keys = []
    return
  }
})

console.log(keys)

方式2：instanceof 类型守卫 #

通过instanceof判断目标是否为HTMLElement，自动缩小类型范围：

let keys: any[] = []

document.addEventListener('keypress', event => {
  if (event.key === ' ') return
  if (!(event.target instanceof HTMLElement)) return
  // 此时event.target已被TypeScript识别为HTMLElement类型
  if (event.target.nodeName === 'INPUT' ||
    event.target.nodeName === 'TEXTAREA' ||
    event.target.isContentEditable) {
    keys = []
    return
  }
})

console.log(keys)

注意：nodeName返回的是大写字符串，所以判断'INPUT'、'TEXTAREA'是正确的，不需要改成小写。

内容的提问来源于stack exchange，提问作者wyc