如何获取包含.form、.labels等属性的表单元素TypeScript类型？

TypeScript 并没有提供一个现成的内置类型来统一涵盖所有具备 .form、.labels、.value、.disabled 等属性的原生表单元素——这些元素（如 HTMLInputElement、HTMLSelectElement 等）都继承自 HTMLElement，但各自通过独立接口扩展了表单相关属性，没有统一的父接口来聚合这些特性。

以下是两种无需手动枚举所有表单元素的解决方案：

1. 自定义类型守卫（推荐） #

通过类型谓词函数，基于元素的结构特征做类型检查，让 TypeScript 自动缩小类型范围，避免属性不存在的报错：

// 定义类型谓词，匹配具备核心表单属性的元素
function isFormElement(element: HTMLElement): element is {
  form: HTMLFormElement | null;
  labels: NodeListOf<HTMLLabelElement>;
  value: string;
  disabled: boolean;
} {
  // 检查关键属性是否存在，可根据需求调整判断条件
  return (
    'form' in element &&
    'labels' in element &&
    'value' in element &&
    typeof element.disabled === 'boolean'
  );
}

// 使用示例
function handleElements(elements: HTMLElement[]) {
  elements.forEach(element => {
    if (isFormElement(element)) {
      // 此处 TypeScript 会认可 element 拥有上述表单属性
      console.log(element.form?.id, element.value, element.disabled);
    } else {
      // 处理非表单元素逻辑
    }
  });
}

这种方式的优势是灵活性强，无需枚举所有表单元素，甚至能兼容符合结构特征的自定义表单元素。

2. 自定义通用接口 + 类型断言 #

如果你明确知道目标元素的结构，也可以先定义一个通用接口，再通过类型断言快速转换类型（注意：这种方式需要你自己确保元素符合接口结构，否则运行时可能出错）：

interface GenericFormElement extends HTMLElement {
  form: HTMLFormElement | null;
  labels: NodeListOf<HTMLLabelElement>;
  value: string;
  disabled: boolean;
}

// 使用示例
const element = document.getElementById('some-element') as HTMLElement;
if ('form' in element) {
  const formElement = element as GenericFormElement;
  console.log(formElement.value);
}

补充说明 #

ChatGPT 推荐的联合类型枚举方式虽然精准，但确实存在遗漏表单元素的风险。而上述两种方案更适配“遍历混合元素、自动识别表单元素”的场景。

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