开启JS严格类型检查后，如何将Element转为HTMLElement？

这确实是开启checkJs后常见的小困扰——毕竟getElementsByClassName返回的Element类型本身确实没有style属性，而我们日常操作的DOM元素大多是继承自它的HTMLElement。在纯JavaScript环境里没法直接用TypeScript的as类型断言，但有几种合法且有效的方式来处理：

方法1：使用JSDoc类型标注（最推荐） #

VS Code完全支持通过JSDoc注释给JavaScript变量指定类型，这也是开启checkJs后最常用的类型提示方式：

let buttons = document.getElementsByClassName("button");
/** @type {HTMLElement | null} */
let btn = buttons[0];
if (btn) { // 先判断元素是否存在，避免null报错
  btn.style.color = "red";
}

这里的/** @type {HTMLElement | null} */会告诉VS Code的类型检查器，把btn当作HTMLElement或null来处理，这样style属性就会被正确识别，不会再报错。

方法2：通过类型守卫收窄类型 #

如果你不想用JSDoc，可以通过检查元素的属性来让类型检查器自动收窄类型：

let buttons = document.getElementsByClassName("button");
let btn = buttons[0];
// 检查btn存在且包含style属性，类型检查器会自动识别为HTMLElement
if (btn && "style" in btn) {
  btn.style.color = "red";
}

这种方式更偏向“纯JS”写法，不需要额外的注释，类型检查器会通过你写的条件自动推断出btn的具体类型。

方法3：换用更精准的DOM API #

如果场景允许，也可以直接使用返回类型更贴合需求的API，比如querySelector，再配合JSDoc标注：

/** @type {HTMLElement | null} */
let btn = document.querySelector(".button");
if (btn) {
  btn.style.color = "red";
}

querySelector本身返回的是Element | null，但通过JSDoc标注后，同样可以让类型检查器识别为HTMLElement。

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