Typescript下给HTMLElement拓展属性

如下代码:
declare global {
  interface HTMLElement {
    _tooltipHandlers?: {
      mouseenter: (event: MouseEvent) => void;
      mouseleave: () => void;
    };
    _tooltipOptions?: TooltipOptions;
  }
}

解释:
这段 TypeScript 代码的作用是扩展全局的 HTMLElement 接口，为 HTML 元素对象添加两个可选的自定义属性，用于实现 tooltip（工具提示）功能相关的逻辑。所有 HTML 元素（即所有实现了 HTMLElement 接口的元素）在 TypeScript 类型系统中都会“自动具备”你添加的这两个可选属性。

关键词解析:
declare global
这是 TypeScript 的声明合并语法，用于在全局作用域中扩展已有的类型定义。这段代码通常出现在 .d.ts 类型声明文件中或模块中用于类型扩展。
interface HTMLElement
这是对浏览器内建的 HTMLElement 接口进行扩展。


添加的两个属性:
HTMLElement._tooltipHandlers?
_tooltipHandlers?: {
  mouseenter: (event: MouseEvent) => void;
  mouseleave: () => void;
};
一个对象，包含两个事件处理函数：mouseenter 和 mouseleave。
用于手动绑定和解绑 tooltip 的事件监听器。
? 表示该属性是可选的。


HTMLElement._tooltipOptions?
_tooltipOptions?: TooltipOptions;
也是一个可选属性，用于存储与 tooltip 相关的配置项。
TooltipOptions 是一个类型（可能在其他地方声明），用于定义 tooltip 的行为，如延迟时间、位置、内容等。


使用场景
这段代码通常出现在一个实现自定义 tooltip 的系统中，例如:
const el = document.querySelector('.has-tooltip') as HTMLElement;

el._tooltipOptions = {
  content: 'Hello Tooltip',
  delay: 300,
};

el._tooltipHandlers = {
  mouseenter: (e) => showTooltip(el, e),
  mouseleave: () => hideTooltip(el),
};

el.addEventListener('mouseenter', el._tooltipHandlers.mouseenter);
el.addEventListener('mouseleave', el._tooltipHandlers.mouseleave);

总结
这段代码的目的：
✅ 在不修改 DOM 标准接口的前提下，为 tooltip 实现绑定事件处理器和配置项提供了一个干净、类型安全的方式。
✅ 使用可选属性和扩展接口的方式，确保不会对现有代码造成破坏，且保留 TypeScript 类型检查的优势。