TypeScript报错'slider' is possibly 'null'，求修复方案

TypeScript开启严格空值检查后，document.getElementById()的返回值会被推断为HTMLElement | null，直接访问其属性会触发非空校验报错。以下是几种可行的解决方法：

• 非空断言（!）
  确认页面中id="slider"的元素必然存在时，用!跳过空值校验：

  const slideLeft = () => {
    const slider = document.getElementById("slider")!;
    slider.scrollLeft = slider.scrollLeft - 1000;
  };
  
  const slideRight = () => {
    const slider = document.getElementById("slider")!;
    slider.scrollLeft = slider.scrollLeft + 1000;
  };
  

• 类型守卫检查
  显式判断元素是否存在，再执行操作，这是最严谨的写法：

  const slideLeft = () => {
    const slider = document.getElementById("slider");
    if (slider) {
      slider.scrollLeft = slider.scrollLeft - 1000;
    }
  };
  
  const slideRight = () => {
    const slider = document.getElementById("slider");
    if (slider) {
      slider.scrollLeft = slider.scrollLeft + 1000;
    }
  };
  

• 可选链+空值合并
  兼顾安全性，避免元素不存在时出现运行时错误：

  const slideLeft = () => {
    const slider = document.getElementById("slider");
    slider.scrollLeft = (slider?.scrollLeft ?? 0) - 1000;
  };
  
  const slideRight = () => {
    const slider = document.getElementById("slider");
    slider.scrollLeft = (slider?.scrollLeft ?? 0) + 1000;
  };
  

• 类型断言指定元素类型
  若明确元素类型（比如是HTMLDivElement），可结合类型断言使用：

  const slideLeft = () => {
    const slider = document.getElementById("slider") as HTMLDivElement;
    slider.scrollLeft = slider.scrollLeft - 1000;
  };
  
  const slideRight = () => {
    const slider = document.getElementById("slider") as HTMLDivElement;
    slider.scrollLeft = slider.scrollLeft + 1000;
  };
  

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