“元素”上不存在属性“焦点”？答案

【问题标题】：Property 'focus' does not exist on 'Element'?“元素”上不存在属性“焦点”？
【发布时间】：2020-01-06 15:22:12
【问题描述】：

创建键盘导航，遇到以下问题：

let currentActive = document.activeElement;
if (e.key === "ArrowLeft") {
  currentActive.previousElementSibling.focus();
}

代码按预期工作，但 TypeScript 抱怨 Property 'focus' does not exist on 'Element'? - currentActive 是 <img /> 标记。

我尝试将 currentActive 分配为 HTMLElement，这样做： let currentActive = document.activeElement as HTMLCollectionOf<HTMLElement>，不过好像不太喜欢。

我错过了什么？

【问题讨论】：

【解决方案1】：

我建议尝试这样的事情：

let currentActive = document.activeElement;
if (e.key === "ArrowLeft") {
  (currentActive.previousElementSibling as HTMLElement)?.focus();
}

请注意，自 TypeScript 3.7 起可选链接可用

【讨论】：

【解决方案2】：

你需要让 TS 相信 currentActive.previousElementSibling 的类型是 HTMLElement。

作为奖励提示，我建议您说服自己并避免控制台中出现一些红十字。也许类似于currentActive?.previousElementSibling?.focus?.();

【讨论】：

【解决方案3】：

我遇到了同样的问题，我通过定义 queryselector 所期望的元素类型解决了这个问题。在我的情况下，我期待一个 input 元素，所以我做到了：

document.querySelector<HTMLInputElement>(`input[name=${element-name}]`)?.focus()

【讨论】：

【解决方案4】：

使用as 告诉 TS 它是一个 HTMLElement：

(currentActive.previousElementSibling as HTMLElement).focus();

【讨论】：