TypeScript编写支持接收HTMLElement的通用DOM创建类方案

类型报错核心来自3个实现缺陷：

• Create类本身没有和DOM节点类型做兼容，TS不会将类实例识别为合法的ParentNode类型，直接传实例作为父参自然触发类型不匹配
• 类内部生成的DOM节点被protected修饰，外部无法访问真实DOM实例，也没法将实例作为DOM节点使用
• 代码中用到的ElementNode类型未做声明，属于缺失的类型定义

支持传入原生HTMLElement/ParentNode、Create类实例作为父容器，实例可直接获取生成的DOM节点，同时支持链式调用：

// 定义支持的父节点类型：原生DOM节点 或 Create类实例
type ElementParent = ParentNode | Create;

class Create {
  // 改为public readonly，外部可访问、不可随意篡改
  readonly element: HTMLElement;

  constructor(
    parent?: ElementParent,
    tag: keyof HTMLElementTagNameMap = 'div',
    classNames: string = '',
    value?: string,
    attr?: Record<string, string | number | boolean>
  ) {
    // 创建目标DOM节点
    this.element = document.createElement(tag);
    
    // 处理类名，自动过滤空值避免空格导致的类名添加报错
    const validClassList = classNames.split(' ').filter(Boolean);
    if (validClassList.length) {
      this.element.classList.add(...validClassList);
    }

    // 处理节点内容
    if (typeof value === 'string') {
      this.element.innerHTML = value;
    }

    // 处理节点属性
    if (attr) {
      Object.entries(attr).forEach(([key, val]) => {
        this.element.setAttribute(key, String(val));
      });
    }

    // 挂载到父节点：如果传入的是Create实例，自动取其内部DOM挂载
    if (parent) {
      const targetParent = parent instanceof Create ? parent.element : parent;
      targetParent.appendChild(this.element);
    }
  }

  /**
   * 追加子节点，支持传原生DOM或Create实例
   * 返回实例本身支持链式调用
   */
  append(child: Element | Create): this {
    const targetChild = child instanceof Create ? child.element : child;
    this.element.append(targetChild);
    return this;
  }

  /**
   * 快捷获取原生DOM实例，适配需要直接传入原生DOM的场景
   */
  getDom(): HTMLElement {
    return this.element;
  }
}

修正后测试代码可正常通过类型校验：

// 不会触发类型错误
const wrapper = new Create(document.body, 'div', 'wrapper');
const subWrap = new Create(wrapper, 'div', 'sub-wrap', '子容器内容');
const text = new Create(subWrap, 'p', 'text', '测试文本');

// 支持链式调用
wrapper.append(
  new Create(undefined, 'span', 'tip', '动态追加的提示')
)

如果要基于原有抽象类实现模块级别的元素批量创建，可以将Create的能力整合为基类内置方法，适合作为页面/组件的公共基类：

abstract class Template {
  readonly container: HTMLElement;

  protected constructor(
    tag: keyof HTMLElementTagNameMap = 'main',
    id?: string,
    classNames?: string
  ) {
    this.container = document.createElement(tag);
    if (id) this.container.id = id;
    if (classNames) {
      const validClassList = classNames.split(' ').filter(Boolean);
      this.container.classList.add(...validClassList);
    }
  }

  /**
   * 内置通用元素创建方法
   */
  protected createEl(
    parent: ElementParent,
    tag: keyof HTMLElementTagNameMap,
    classNames: string,
    value?: string,
    attr?: Record<string, string | number | boolean>
  ): HTMLElement {
    return new Create(parent, tag, classNames, value, attr).element;
  }

  protected header(content: string, classNames?: string): HTMLHeadingElement {
    const title = document.createElement('h1');
    title.innerText = content;
    if (classNames) {
      const validClassList = classNames.split(' ').filter(Boolean);
      title.classList.add(...validClassList);
    }
    return title;
  }

  /**
   * 将当前模块挂载到指定父容器
   */
  mount(parent: ElementParent): this {
    const targetParent = parent instanceof Create ? parent.element : parent;
    targetParent.appendChild(this.container);
    return this;
  }

  /**
   * 返回模块根容器DOM
   */
  render(): HTMLElement {
    return this.container;
  }
}

使用示例：

class MangaStoreHeader extends Template {
  constructor() {
    super('header', 'site-header', 'header-wrap');
    const logo = this.createEl(this.container, 'div', 'header-logo');
    const logoLink = this.createEl(logo, 'a', 'logo-link', undefined, { href: '/' });
    this.createEl(logoLink, 'h2', 'logo-title', 'Manga Store');
    
    const nav = this.createEl(this.container, 'nav', 'header-nav');
    const navList = this.createEl(nav, 'ul', 'nav-list');
    // 后续可直接遍历导航配置批量生成列表项
  }
}

// 挂载到页面
new MangaStoreHeader().mount(document.body);

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