mcpField
D
dom-hierarchy

dom-hierarchy

github.com/marius-townhouse开发644 次安装38 周前更新
代码仓库

关于 dom-hierarchy

面向使用浏览器 DOM API 的 TypeScript 开发者，讲解 DOM 类型层级，并建议优先使用最具体的类型，以提升类型安全和代码清晰度。

主要功能

  1. 01DOM 类型层级指导
  2. 02元素引用的具体类型
  3. 03DOM 事件与工具函数类型

适用场景

  1. 01为 HTML 输入框和按钮标注类型
  2. 02构建 DOM 工具函数
  3. 03处理 DOM 事件

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/marius-townhouse/effective-typescript-skills --skill dom-hierarchy

安装后在 Claude Code 中输入/dom-hierarchy确认已加载。

详细介绍

理解 DOM 层级结构

概述

TypeScript 的 DOM 类型准确地模拟了浏览器的 DOM 层级结构。理解这一层级结构——Element 扩展 Node、HTMLElement 扩展 Element 等——有助于编写正确的 DOM 代码。尽可能使用最具体的类型，以获得更好的自动补全和类型安全性。

何时使用此技能

  • 使用 DOM API 时
  • 为元素引用指定类型时
  • 创建 DOM 工具时
  • 处理 DOM 事件时
  • 操作 DOM 时

铁律

尽可能使用最具体的 DOM 类型。HTML 元素使用 HTMLElement，输入框使用 HTMLInputElement，依此类推。

DOM 类型层级结构

EventTarget
  └── Node
       └── Element
            └── HTMLElement
            │    └── HTMLInputElement
            │    └── HTMLButtonElement
            │    └── etc.
            └── SVGElement

例子

// BAD: Too general
const el: Element = document.getElementById('input');
el.value; // Error: Property 'value' doesn't exist on Element

// GOOD: Specific type
const input = document.getElementById('input') as HTMLInputElement;
input.value; // OK - value exists on HTMLInputElement

// Even better: Use querySelector with type parameter
const button = document.querySelector<HTMLButtonElement>('button.submit');
button?.disabled; // Typed correctly

参考资料

  • Dan Vanderkam 著，《Effective TypeScript》第 2 版
  • 条目 75：理解 DOM 层级结构

评论

支持 Markdown