TypeScript中扩展document.createElement方法及替代方案咨询

1. 封装独立工具函数（推荐） #

直接实现自己的元素创建工具，完全不依赖修改原生document.createElement，既安全又能满足需求，同时保持TypeScript的类型推断能力。

type ElementAttributes = Record<string, string | boolean | null>;

function createElement<K extends keyof HTMLElementTagNameMap>(
  tagName: K,
  attributes?: ElementAttributes
): HTMLElementTagNameMap[K] {
  const element = document.createElement(tagName);
  
  if (attributes) {
    Object.entries(attributes).forEach(([key, value]) => {
      // 处理布尔属性：true设为空字符串，false/null移除属性
      if (value === true) {
        element.setAttribute(key, '');
      } else if (value === false || value === null) {
        element.removeAttribute(key);
      } else {
        element.setAttribute(key, value);
      }
    });
  }
  
  return element;
}

// 使用示例
const container = createElement('div', {
  class: 'content-wrapper',
  id: 'main-content',
  'data-user-id': '456',
  hidden: false
});

这个函数会自动根据属性类型处理设置逻辑，TypeScript能自动推断返回的元素类型（比如调用createElement('a')会返回HTMLAnchorElement），类型安全且无全局污染。

2. 扩展原生类型（谨慎使用） #

如果坚持要使用document.createElement的调用形式，可以通过TypeScript的声明合并扩展其类型，再包装原生方法实现属性自动设置。但这种方式会修改全局对象，存在与其他代码冲突的风险，仅在必要时使用。

步骤1：扩展类型声明 #

declare global {
  interface Document {
    createElement<K extends keyof HTMLElementTagNameMap>(
      tagName: K,
      attributes?: Record<string, string | boolean | null>
    ): HTMLElementTagNameMap[K];
  }
}

步骤2：包装原生方法 #

const originalCreateElement = document.createElement;

document.createElement = function<K extends keyof HTMLElementTagNameMap>(
  tagName: K,
  attributes?: Record<string, string | boolean | null>
) {
  const element = originalCreateElement(tagName) as HTMLElementTagNameMap[K];
  
  if (attributes) {
    Object.entries(attributes).forEach(([key, value]) => {
      if (value === true) {
        element.setAttribute(key, '');
      } else if (value === false || value === null) {
        element.removeAttribute(key);
      } else {
        element.setAttribute(key, value);
      }
    });
  }
  
  return element;
};

// 使用示例
const submitBtn = document.createElement('button', {
  type: 'submit',
  disabled: true,
  class: 'primary-btn'
});

3. 为什么不推荐直接修改原生原型？ #

修改document或HTMLElement的原生原型会污染全局环境，可能与第三方库、浏览器未来的API更新产生冲突，同时会降低代码的可维护性——其他开发者阅读代码时可能会困惑于原生方法的异常行为。

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