\'string | 类型的参数null\' 不可分配给 \'keyof HTMLElementTagNameMap\' 类型的参数

Question

我有这段代码可以在单击链接时创建平滑滚动：

const navLinks = document.querySelectorAll('.nav-item a') as NodeListOf<HTMLAnchorElement>;

navLinks.forEach((link: HTMLAnchorElement) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();

    const target = document.querySelector(link.getAttribute('href'));

    if (target) {
      target.scrollIntoView({
        behavior: 'smooth',
      });
    }
  });
});

Typescript 在我设置target 的行上抛出错误（参见问题文本），特别是在document.querySelector(link.getAttribute('href')); 上

如果我用简单的插值 document.querySelector(`${link.getAttribute('href')}`); 替换该行，那么错误就会消失。无论哪种方式，我的代码都按预期工作，但它开始让我不由自主地抽搐，我无法找出 TS 错误。我错过了什么？

Answer 1

不是每个<a> 都有一个href：

console.log(document.querySelector('a').getAttribute('href'));

<a></a>

通过做

.querySelector(`${link.getAttribute('href')}`)

你正在将任何 getAttribute 的结果变成一个字符串 - 即使它是 null （这很可能导致 target 不存在）。

要修复 TypeScript 错误，请考虑将 [href] 添加到您的选择器字符串以确保您只选择带有 hrefs 的元素，然后使用 ! 向 TypeScript 断言 link 肯定有一个。

const navLinks = document.querySelectorAll<HTMLAnchorElement>('.nav-item a[href]');

navLinks.forEach((link: HTMLAnchorElement) => {
  link.addEventListener('click', (e) => {
    e.preventDefault();

    const target = document.querySelector(link.getAttribute('href')!);

    if (target) {
      target.scrollIntoView({
        behavior: 'smooth',
      });
    }
  });
});

为了使代码更清晰，您还可以考虑更换

const target = document.querySelector(link.getAttribute('href')!);

首先检查属性是否以 # 开头（因为通常href 将不是有效的选择器字符串 - 检查将使代码更清楚地表明代码是针对同一页面上的 ID）。