如何解决event.target、parentNode等代码的ESLint/VSCode [js]报错问题？

嘿，先澄清一个关键点：你提到的[js]工具提示其实是VS Code内置的TypeScript语言服务在做静态类型检查，不是ESLint报错哦！不过既然你们团队要求ESLint报错就终止构建，我们可以从编码层面解决这些问题（既符合规范又能避免潜在bug），也可以调整配置来关闭相关提示，下面逐个给你方案：

1. 处理 event.target.parentNode 的类型报错 #

问题代码 #

window.addEventListener('keydown', event => { 
  const currentTag = event.target.parentNode.tagName; 
  /* ... */ 
})

报错原因 #

event.target的类型是EventTarget，它可能是任何触发事件的对象（比如window本身），不一定是DOM元素，所以没有parentNode属性。

解决方法 #

优先推荐用条件判断来确保目标是DOM元素，这样能避免运行时错误：

window.addEventListener('keydown', event => { 
  if (event.target instanceof HTMLElement) {
    const currentTag = event.target.parentNode.tagName; 
    /* ... */ 
  }
})

如果你确定触发事件的一定是DOM元素，也可以用纯ES6的类型注释断言：

window.addEventListener('keydown', event => { 
  const target = event.target /** @type {HTMLElement} */;
  const currentTag = target.parentNode.tagName; 
  /* ... */ 
})

2. 处理 document.activeElement.click() 的类型报错 #

问题代码 #

document.activeElement.click(); 

报错原因 #

document.activeElement的类型是Element | null，不是所有Element都有click()方法（比如普通<div>就没有），只有HTMLElement才包含这个方法。

解决方法 #

先用条件判断做安全校验：

const activeElement = document.activeElement;
if (activeElement instanceof HTMLElement) {
  activeElement.click();
}

或者用类型注释断言（确定当前活跃元素是可点击的HTMLElement时）：

(document.activeElement /** @type {HTMLElement} */).click();

3. 处理 this.childNodes[1].querySelectorAll('tr') 的类型报错 #

问题代码 #

const rows = this.childNodes[1].querySelectorAll('tr'); 

报错原因 #

childNodes返回的是NodeList，里面的节点可能是文本节点、注释节点这类非元素节点，它们没有querySelectorAll方法。

解决方法 #

先校验节点类型再操作：

const targetNode = this.childNodes[1];
if (targetNode instanceof HTMLElement) {
  const rows = targetNode.querySelectorAll('tr');
  /* ... */
}

或者用类型注释断言：

const rows = (this.childNodes[1] /** @type {HTMLElement} */).querySelectorAll('tr');

额外说明：关闭VS Code的静态类型检查 #

如果你完全不需要VS Code的这类类型提示，可以在VS Code的settings.json里添加：

"javascript.implicitProjectConfig.checkJs": false

不过还是更推荐用编码层面的条件判断，毕竟能提前规避很多运行时的潜在问题。

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