如何使用TypeScript实现DOM元素的动态类型守卫？

首先明确核心问题：TypeScript的泛型类型是编译时概念，运行时会被擦除，所以直接用typeof T或传字符串类型名的思路行不通。正确的做法是传入DOM元素的构造函数作为参数——构造函数在运行时是真实存在的对象，可结合instanceof完成类型检查。

正确实现方式 #

定义一个接受构造函数类型的泛型函数，利用TypeScript的类型推断自动推导返回值类型：

function getElement<T extends HTMLElement>(
  selector: string,
  elementClass: new (...args: any[]) => T
): T {
  const el = document.querySelector(selector);

  // 双重检查：元素存在 + 属于目标类型
  if (!el || !(el instanceof elementClass)) {
    throw new Error(`元素不存在或类型不符合预期：${selector}`);
  }

  return el;
}

使用示例 #

调用时直接传入对应的DOM构造函数（如HTMLInputElement、HTMLDivElement），无需手动指定泛型参数（TypeScript会自动推导）：

// 自动推断返回HTMLInputElement类型
const unit = getElement('#unitToggle', HTMLInputElement);

// 自动推断返回HTMLDivElement类型
const container = getElement('#app-container', HTMLDivElement);

原理说明 #

• new (...args: any[]) => T是构造函数类型，表示“可生成T类型实例的构造函数”，TypeScript能识别所有DOM元素构造函数都符合该类型定义。
• el instanceof elementClass在运行时检查元素的原型链，确保它确实是目标类的实例；同时TypeScript会在编译时将el的类型收窄为T，既保证运行时安全，也实现编译时类型校验。

额外优化：抽离类型守卫逻辑 #

如果需要复用类型检查逻辑，可封装自定义类型守卫：

function isElementOfType<T extends HTMLElement>(
  el: Element | null,
  elementClass: new (...args: any[]) => T
): el is T {
  return el instanceof elementClass;
}

// 重构后的getElement函数
function getElement<T extends HTMLElement>(selector: string, elementClass: new (...args: any[]) => T): T {
  const el = document.querySelector(selector);
  if (!isElementOfType(el, elementClass)) {
    throw new Error(`元素不存在或类型错误：${selector}`);
  }
  return el;
}

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