TypeScript报错：string|null无法赋值给keyof HTMLElementTagNameMap的原因

核心是TypeScript的类型校验规则 #

• link.getAttribute('href')的返回类型是string | null——DOM元素的属性可能不存在，所以这个API的返回值被设计成可能为null。
• document.querySelector()的参数不接受null，它要求传入有效的CSS选择器字符串，所以直接传这个值时，TypeScript检测到null类型不匹配，就抛出了你看到的错误。

模板字符串为什么能解决问题 #

当你用${link.getAttribute('href')}时，TypeScript会自动做类型转换：如果getAttribute返回null，模板字符串会把它转成字符串"null"，最终整个表达式的类型变成了纯string（不再包含null分支），完全符合querySelector的参数类型要求，所以错误就消失了。

补充：如果某个链接真的没有href属性，模板字符串会生成"null"作为选择器，这时候querySelector("null")肯定找不到元素，但你的代码里有if (target)的判断，所以不会触发后续滚动逻辑，功能上不会出问题。

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