解决TypeScript报错：Property 'checkValidity'不存在于Element类型

问题根源 #

document.querySelectorAll('.needs-validation')返回的是NodeListOf<Element>类型集合，而checkValidity()是HTMLFormElement（表单元素）独有的方法。你之前尝试转为HTMLElement/HTMLInputElement都不对——HTMLElement本身没有这个方法，HTMLInputElement是输入框的类型，和表单元素类型不匹配，所以报错无法解决。

三种有效解决方案 #

方案1：直接指定querySelectorAll的泛型类型

在调用querySelectorAll时明确指定元素类型为HTMLFormElement，后续循环的每个form都会被正确识别为表单类型：

(() => {
  'use strict'

  // 直接指定返回类型为HTMLFormElement的NodeList
  const forms = document.querySelectorAll<HTMLFormElement>('.needs-validation')

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }

      form.classList.add('was-validated')
    }, false)
  })
})()

方案2：循环时进行类型断言

如果不想修改querySelectorAll的调用，可以在循环时将form断言为HTMLFormElement：

Array.from(forms).forEach((form: HTMLFormElement) => {
  // 后续代码可直接调用checkValidity
  form.addEventListener('submit', event => {
    if (!form.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }

    form.classList.add('was-validated')
  }, false)
})

方案3：使用类型守卫缩小范围

通过instanceof判断确保元素是表单类型，兼顾类型安全：

Array.from(forms).forEach(form => {
  // 类型守卫：非表单元素直接跳过
  if (!(form instanceof HTMLFormElement)) return;
  
  form.addEventListener('submit', event => {
    if (!form.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }

    form.classList.add('was-validated')
  }, false)
})

为什么之前的尝试无效？ #

• 使用as any虽然能绕过类型检查，但丢失了TypeScript的类型安全优势，且如果元素不是表单，运行时可能出错；
• 转为HTMLElement：HTMLElement是所有HTML元素的基类，并不包含checkValidity方法；
• 转为HTMLInputElement：这是输入框元素的类型，和表单元素（HTMLFormElement）类型不匹配，自然无法调用表单的方法。

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