TypeScript中querySelector为何允许赋值给HTMLElement类型？

querySelector可返回Element的任意子类型，网页中最常见的是HTMLElement或SVGElement，二者并不兼容。但TypeScript允许将querySelector的结果赋值给HTMLElement | null类型，并访问其专属属性（比如hidden）却不报错；而如果手动将变量类型设为SVGElement | null，TypeScript会正确报错，提示无法访问hidden属性。

示例代码：

// 为何假设返回HTMLElement而非SVGElement等类型时无错误？
const foo: HTMLElement | null = document.querySelector("*");

if (foo !== null) {
    console.log(foo.hidden);
}

原因解析 #

1. TypeScript DOM类型的实用化妥协设计
   TypeScript的DOM类型定义中，querySelector默认返回Element | null，但考虑到绝大多数网页开发场景下，开发者选中的元素都是HTMLElement，TypeScript做了宽松处理：允许Element类型隐式兼容HTMLElement类型，避免开发者每次都要手动添加类型断言，减少开发负担。

2. HTMLElement与SVGElement的同级类型关系
   HTMLElement和SVGElement是Element的同级子类型，二者不存在继承关系，因此互相不兼容。当尝试将Element | null赋值给SVGElement | null时，TypeScript会严格检测到类型不匹配，触发报错。

规避潜在风险的方式 #

如果需要确保元素类型准确，可通过以下方法：

• 使用更具体的选择器，让querySelector自动推断正确类型（比如document.querySelector("div")会返回HTMLDivElement | null）；
• 手动添加类型断言（比如document.querySelector("*") as HTMLElement）；
• 使用类型守卫验证元素类型：

  const foo = document.querySelector("*");
  if (foo instanceof HTMLElement) {
      console.log(foo.hidden);
  }
  

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