如何让TypeScript对document.createElement的未知标签名报错？

问题根源 #

TypeScript默认的document.createElement类型允许传入任意字符串，因此使用大写标签名（如"A"）或拼写错误的标签时，只会在后续访问专属属性时才报错，无法在调用阶段提前拦截。

解决方案：重写createElement的类型约束 #

通过自定义全局类型声明，限制createElement的参数只能是W3C标准的小写HTML/SVG标签名，实现调用阶段的错误提示：

1. 在项目根目录创建全局类型声明文件（如global.d.ts），添加以下代码：

interface Document {
  // 限制HTML标签为标准小写名称
  createElement<K extends keyof HTMLElementTagNameMap>(tagName: K): HTMLElementTagNameMap[K];
  // 若需要SVG支持，保留下面这行；不需要则删除
  createElement<K extends keyof SVGElementTagNameMap>(tagName: K, options?: ElementCreationOptions): SVGElementTagNameMap[K];
}

2. 确保tsconfig.json中开启严格类型检查（至少启用noImplicitAny和strictNullChecks），推荐直接开启strict: true：

{
  "compilerOptions": {
    "strict": true,
    // 其他配置...
  }
}

效果验证 #

• 调用document.createElement("A")时，TypeScript会直接在该行报错：类型"A"的参数不能赋给类型"keyof HTMLElementTagNameMap"的参数
• 拼写错误的标签名（如"linkk"）也会在调用行触发同样的类型错误
• 标准小写标签名（如"a"）依然正常返回对应DOM类型（HTMLAnchorElement），不影响后续属性访问

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