TypeScript：DOM类型null无法赋值给HTMLFormElement的解决办法

TypeScript报错是因为document.querySelector()返回的类型是HTMLFormElement | null——如果页面中找不到匹配.credential_form的元素，就会返回null，而你直接把它赋值给了HTMLFormElement类型的变量，类型不兼容。以下是几种常用的解决方式：

• 非空断言操作符（!）
  如果你确定页面中一定存在这个表单元素，可以在调用后加!，强制告诉编译器该结果不会是null：

  let form: HTMLFormElement = document.querySelector('.credential_form')!;
  

  注意：如果实际运行时元素不存在，会触发运行时错误，只适合元素必然存在的场景。

• 类型守卫（空值检查）
  通过if语句判断元素是否存在，TypeScript会自动在代码块内将类型缩小为HTMLFormElement，这是最安全的方式：

  const form = document.querySelector('.credential_form');
  if (form) {
    // 此处form的类型已自动推断为HTMLFormElement
    form.addEventListener('submit', (e) => {
      e.preventDefault();
      // 处理表单提交逻辑
    });
  }
  

• 可选链操作符（?.）
  如果你只是需要调用表单的方法（比如submit），不需要将元素赋值给变量，可以直接用可选链，避免空值报错：

  document.querySelector('.credential_form')?.submit();
  

  元素不存在时，整个表达式会返回undefined，不会执行后续方法。

• 类型断言（as）
  用as关键字手动指定类型，效果和非空断言类似，但语义更明确：

  let form = document.querySelector('.credential_form') as HTMLFormElement;
  

  同样需要确保元素实际存在，否则运行时访问form的属性/方法会报错。

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