出现Property 'style' does not exist on type 'Element'错误怎么修复？

报错原因 #

这个是TypeScript静态类型检查抛出的错误，不是JS运行时错误：
document.getElementsByClassName 返回的是 HTMLCollectionOf<Element> 类型，document.getElementById 返回的是 Element | null 类型，而Element是所有DOM元素的基类，本身没有定义style属性，只有继承自Element的HTMLElement类型才包含style属性，所以类型检查会报错。
只要你页面中对应的元素确实是标准HTML元素，运行时访问style不会有问题，只需要修正类型定义即可。

修复方案 #

方案1：类型断言（最简单，适合确定对应元素一定存在且为HTML元素的场景）

直接把获取到的元素断言为HTMLElement类型即可：

function showTab(n) {
  // 断言tab集合的每一项都是HTMLElement
  var x = document.getElementsByClassName("tab") as HTMLCollectionOf<HTMLElement>;
  x[n].style.display = "block";
  // 断言按钮为HTMLElement
  const prevBtn = document.getElementById("prevBtn") as HTMLElement;
  if (n == 0) {
    prevBtn.style.display = "none";
  } else {
    prevBtn.style.display = "inline";
  }
  const nextBtn = document.getElementById("nextBtn") as HTMLElement;
  if (n == (x.length - 1)) {
    nextBtn.innerHTML = "Submit";
  } else {
    nextBtn.innerHTML = "Next";
  }
  fixStepIndicator(n)
}

方案2：类型收窄（更安全，可同时避免运行时空值报错）

先判断元素是否为HTMLElement实例，再进行属性操作，类型检查会自动识别正确的类型：

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  const currentTab = x[n];
  if (currentTab instanceof HTMLElement) {
    currentTab.style.display = "block";
  }

  const prevBtn = document.getElementById("prevBtn");
  if (prevBtn instanceof HTMLElement) {
    prevBtn.style.display = n == 0 ? "none" : "inline";
  }

  const nextBtn = document.getElementById("nextBtn");
  if (nextBtn instanceof HTMLElement) {
    nextBtn.innerHTML = n == (x.length - 1) ? "Submit" : "Next";
  }

  fixStepIndicator(n)
}

如果是开启了类型检查的纯JS项目，可以在文件顶部加注释// @ts-nocheck跳过整个文件的类型检查，不过不推荐这么做，会丢失类型校验能力。

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