TypeScript中使用style属性报错：Property 'style'不存在于Element类型的解决方法

在TypeScript中使用style属性时，触发如下错误：

Property 'style' does not exist on type 'Element'.ts(2339)

解决方法： #

• 类型断言为HTMLElement
  TypeScript里Element是所有DOM元素的基类，本身不包含style属性，而HTMLElement继承自Element并扩展了该属性。可以通过类型断言明确指定元素类型：

  const element = document.getElementById('test') as HTMLElement;
  element.style.color = 'red';
  

• 使用类型守卫判断
  若不确定元素是否为HTMLElement，可以用类型守卫做前置判断，避免断言带来的风险：

  const element = document.getElementById('test');
  if (element instanceof HTMLElement) {
    element.style.color = 'red';
  }
  

• 泛型方法指定返回类型
  使用querySelector时，可通过泛型直接指定返回的元素类型：

  const element = document.querySelector<HTMLElement>('#test');
  if (element) {
    element.style.color = 'red';
  }
  

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