'Element'.ts(2339) 类型和类型'string | 上不存在属性'src' null' 不可分配给类型 'string'

Question

我一直在玩这些代码，但仍然不断出错。

const zoom = () => {
  const images = document.querySelectorAll(".voice-details__zoom");
  const modal = document.querySelector(".modal");
  const modalImg = document.querySelector(".modalImg");
  const modalTxt = document.querySelector(".modalTxt");
  const close = document.querySelector(".close");

  images.forEach((image) => {
    image.addEventListener("click", () => {
      let imgSrc = image.getAttribute('data-src');
      modalImg.src = imgSrc; //2 errors
      modalTxt.innerHTML = image.getAttribute('data-alt'); //2 errors
      modal?.classList.add("appear");

      close?.addEventListener("click", () => {
        modal?.classList.remove("appear");
      });
    });
  });
}

以下是编译器的错误： 上午 10:06:36 - 检测到文件更改。开始增量编译... [观看：ts] [watch:ts] src/js/components/zoom.ts(15,7)：错误 TS2531：对象可能为“空”。 [watch:ts] src/js/components/zoom.ts(15,16)：错误 TS2339：“元素”类型上不存在属性“src”。 [watch:ts] src/js/components/zoom.ts(16,7)：错误 TS2531：对象可能为“空”。 [watch:ts] src/js/components/zoom.ts(16,7): error TS2322: Type 'string | null' 不可分配给类型 'string'。 [watch:ts] 类型 'null' 不可分配给类型 'string'。

Answer 1

让我们来一一解决错误。

src/js/components/zoom.ts(15,7): error TS2531: Object is possible is 'null'.

如果querySelector(".modalImg") 调用未能找到匹配元素，则错误提示modalImg 可能是null。因此，要修复此错误，我们应该在找到 modalImg 时分配属性。

if (modalImg) modalImg.src = imgSrc;

src/js/components/zoom.ts(15,16)：错误 TS2339：“元素”类型上不存在属性“src”。

除了null 检查，这里还需要typecast，因为src 不是Element 的属性，而是HTMLImageElement 的子类型。

if (modalImg) {
    (<HTMLImageElement>modalImg).src = imgSrc;
}

src/js/components/zoom.ts(16,7): error TS2531: Object is possible is 'null'.

modalTxt 也需要 null 检查。

if (modalTxt) modalTxt.innerHTML = ... ;

src/js/components/zoom.ts(16,7): 错误 TS2322: Type 'string | null' 不能分配给类型 'string'

错误是抱怨image.getAttribute('data-alt') 可能是null，因此不能分配给innerHTML 字符串 属性。因此，要修复此错误，我们可以使用 OR || 或 nullish coalescing ?? 运算符。

if (modalTxt) {
    modalTxt.innerHTML = image.getAttribute('data-alt') ?? "";
}