属性 'src' 在类型"元素".ts(2339) 和类型"字符串 |null' 不可分配给类型"字符串"

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 AM -检测到文件更改。开始增量编译…(注意:ts)[watch:ts] src/js/components/zoom.ts(15,7):错误TS2531:对象可能是'null'。[watch:ts] src/js/components/zoom.ts(15,16):错误TS2339:属性'src'在类型'Element'上不存在。[watch:ts] src/js/components/zoom.ts(16,7):错误TS2531:对象可能是'null'。[watch:ts] src/js/components/zoom.ts(16,7):错误TS2322:类型'string | null'不能分配给类型'string'。[watch:ts]类型'null'不能赋值给类型'string'。

Answer 1

让我们一遍一遍地修正错误。

src/js/components/缩放。ts(15,7):错误TS2531:对象可能为'null'.

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

if (modalImg) modalImg.src = imgSrc;

src/js/components/zoom.ts(15,16):错误TS2339:属性'src'不存在类型'元素'.

除了空检查，这里还需要一个类型转换，因为src不是Element的属性，而是子类型HTMLImageElement的属性。

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

src/js/components/缩放。ts(16,7):错误TS2531:对象可能为'null'.

null检查对于modalTxt也是必需的。

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

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

错误提示image.getAttribute('data-alt')可能是null，因此不能赋值给innerHTMLstring属性。因此，为了解决这个错误，我们可以使用或||或空合并??运算符。

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