TypeScript 中修改元素第一个子节点 style 属性报错如何解决？

问题原因 #

TypeScript 中element.children返回的是Element类型的集合，Element是DOM元素的基础通用类型，本身未定义style属性，只有更具体的HTMLElement类型才包含style属性的定义，因此会触发类型校验报错。

解决方案 #

方案1：使用类型断言（写法最简单） #

直接将子节点断言为HTMLElement即可，同时建议增加非空判断避免运行时报空指针错误：

let element = document.getElementById("element")
if (element) {
  (element.children[0] as HTMLElement).style.height = "80px"
}

如果确认目标元素一定存在，也可以使用非空断言简写：

let element = document.getElementById("element")!
(element.children[0] as HTMLElement).style.height = "80px"

!为非空断言操作符，作用是告知TypeScriptelement一定不为null，跳过空值校验。

方案2：类型判断后操作（安全性最高） #

如果想要避免强制断言可能带来的类型不匹配问题，可以先做运行时类型校验：

let element = document.getElementById("element")
if (element && element.children[0] instanceof HTMLElement) {
  element.children[0].style.height = "80px"
}

该写法会先校验子节点是否确实为HTMLElement类型，校验通过后才会执行样式修改操作，不会出现强制类型转换带来的隐藏问题。

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