TypeScript 2345错误：HTMLElement与Element类型不兼容求助

错误原因 #

document.querySelectorAll(".choose")返回的是NodeListOf<Element>类型，forEach回调的参数默认是Element类型，但你显式指定了HTMLElement类型。由于Element是HTMLElement的父类，缺少HTMLElement特有的属性与方法，导致类型不匹配。

解决方案 #

方案1：给查询结果添加类型断言 #

直接将querySelectorAll的返回值断言为NodeListOf<HTMLElement>，让forEach的参数类型自动匹配：

(document.querySelectorAll(".choose") as NodeListOf<HTMLElement>).forEach(function (item) {
  item.addEventListener("click", function (e) {
    e.preventDefault();
    (document.querySelector(".card__timer") as HTMLElement).style.display = "block";
    (document.querySelectorAll(".card__block:not(.card__timer)") as NodeListOf<HTMLElement>).forEach(function (el) {
      el.style.display = "none";
    });
    startTimer();
  });
});

方案2：在回调内部断言参数类型 #

如果不想修改查询结果的整体类型，可以在回调里单独将参数断言为HTMLElement：

document.querySelectorAll(".choose").forEach(function (item) {
  const htmlItem = item as HTMLElement;
  htmlItem.addEventListener("click", function (e) {
    e.preventDefault();
    (document.querySelector(".card__timer") as HTMLElement).style.display = "block";
    document.querySelectorAll(".card__block:not(.card__timer)").forEach(function (el) {
      const htmlEl = el as HTMLElement;
      htmlEl.style.display = "none";
    });
    startTimer();
  });
});

方案3：使用类型守卫做安全检查 #

如果需要确保元素确实是HTMLElement（避免SVGElement等非HTML元素的情况），可以添加类型守卫做校验：

document.querySelectorAll(".choose").forEach(function (item) {
  if (item instanceof HTMLElement) {
    item.addEventListener("click", function (e) {
      e.preventDefault();
      const timerEl = document.querySelector(".card__timer");
      if (timerEl instanceof HTMLElement) {
        timerEl.style.display = "block";
      }
      document.querySelectorAll(".card__block:not(.card__timer)").forEach(function (el) {
        if (el instanceof HTMLElement) {
          el.style.display = "none";
        }
      });
      startTimer();
    });
  }
});

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