TypeScript简单项目报错：Element类型上不存在style属性如何解决？

报错原因 #

document.querySelectorAll 默认返回的是通用 Element 类型集合，style 属于 HTMLElement 子类的专属属性，TypeScript 类型检查时无法确认你选中的元素是 HTML 元素，因此抛出属性不存在的错误。你之前尝试的非空断言、判断集合是否存在都无法解决问题，核心原因是类型不匹配而非空值问题。

可行解决方案 #

你可以任选以下一种方案解决：

• 方案1：给 querySelectorAll 指定泛型，最简洁
  直接在调用查询方法时声明返回元素类型为HTMLElement：

let changeBackgroundColor = document.querySelectorAll<HTMLElement>(
      '[data-style="cart-thrash-side-bar-' +
        data.types[whichLoteriaIsVar].type +
        '"]'
    );
changeBackgroundColor.forEach(
  (element) =>
    (element.style.backgroundColor =
      data.types[whichLoteriaIsVar].color)
);

• 方案2：遍历元素时做类型断言
  如果你不想修改查询方法的写法，可以在访问 style 属性前做类型断言：

changeBackgroundColor.forEach(
  (element) =>
    ((element as HTMLElement).style.backgroundColor =
      data.types[whichLoteriaIsVar].color)
);

• 方案3：添加类型守卫，运行时更安全
  如果要兼顾类型安全和运行时校验，可以增加元素类型判断：

changeBackgroundColor.forEach(
  (element) => {
    if (element instanceof HTMLElement) {
      element.style.backgroundColor = data.types[whichLoteriaIsVar].color
    }
  }
);

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