TS报错HTMLDivElement|null无法赋值给HTMLDivElement类型如何解决

报错原因 #

DOM 元素的 querySelector 方法返回值类型为 Element | null：当传入的选择器没有匹配到对应节点时，方法会返回 null。代码中给接收返回值的变量totalCon直接标注了HTMLDivElement类型，没有覆盖null的可能场景，TypeScript 在校验赋值语句时就会抛出该类型不匹配错误。
代码中后续写的if (totalCon)空值判断逻辑本身是正确的，但变量声明阶段的类型标注和方法实际返回值不匹配，TS 会在赋值环节直接抛错，不会执行到后续的类型收窄判断。

修复方法 #

方法1：修正类型标注（推荐，容错性高） #

将变量的类型声明修改为联合类型，匹配querySelector的实际返回值，后续已有的if (totalCon)判断会自动完成类型收窄，不需要改动其他业务逻辑：

scroll = (): void => {
  if (this.isLargerScreenMedia()) {
    this.applyLargeMediaStyles();
  } else {
    const scrollPos: number = document.documentElement.scrollTop;
    // 修正类型，补充null类型
    const totalCon: HTMLDivElement | null =
      this.tripTotalContainer.querySelector('.trip-total-module');
    if (totalCon) {
      if (scrollPos > this.lastScrollPos) {
        // 向下滚动逻辑
        totalCon.style.bottom = '0px';
      } else {
        // 向上滚动逻辑
        totalCon.style.bottom = '27px';
      }
    }
    this.lastScrollPos = scrollPos < 0 ? 0 : scrollPos;
    this.tripTotalContainer.classList.add('sticky-bottom');
  }
};

更简洁的写法是直接使用querySelector的泛型参数，TS会自动推导正确的联合类型，不需要手动标注：

// 自动推导类型为 HTMLDivElement | null
const totalCon = this.tripTotalContainer.querySelector<HTMLDivElement>('.trip-total-module');

方法2：类型断言（仅在确认元素必然存在时使用） #

如果可以完全保证.trip-total-module节点一定存在于容器内，不存在匹配不到的情况，可以通过类型断言告诉TS跳过该值的空校验：

const totalCon = this.tripTotalContainer.querySelector('.trip-total-module') as HTMLDivElement;

风险提示：如果实际运行时节点不存在，该写法会导致后续访问totalCon.style时抛出空引用错误，容错性低于方法1。

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