TypeScript中document.getElementById非空断言触发ESLint报错的合规解决方法

给你几个合规的替代方案，既能满足ESLint规则，又能保证类型安全：

• 使用类型守卫做强制检查
  手动判断元素是否存在，既能让TypeScript自动推断出非空类型，还能在HTML意外改动时及时抛出错误，避免隐性bug：

  const contentElement = document.getElementById("contentId");
  if (!contentElement) {
    throw new Error("找不到ID为contentId的元素");
    // 也可以换成console.error并终止后续逻辑，比如return;
  }
  // 到这里contentElement已经被推断为HTMLElement类型，无需额外断言
  

• 使用类型断言
  如果你百分百确定元素存在，可以用类型断言替代非空感叹号，ESLint默认不会拦截这种写法：

  // 通用HTMLElement类型
  const contentElement = document.getElementById("contentId") as HTMLElement;
  // 如果是特定元素类型（比如div），可以断言成对应类型
  const contentElement = document.getElementById("contentId") as HTMLDivElement;
  

• 封装工具函数统一处理
  把获取元素的逻辑封装成工具函数，复用的同时统一处理空值情况：

  function getRequiredElement<T extends HTMLElement>(id: string): T {
    const element = document.getElementById(id) as T | null;
    if (!element) {
      throw new Error(`Required element #${id} not found in DOM`);
    }
    return element;
  }
  
  // 使用时直接调用
  const contentElement = getRequiredElement<HTMLElement>("contentId");
  

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