如何声明tagName关联element类型且子元素独立的TypeScript类型？

你遇到的核心问题在于：非泛型版本无法让tagName与onCreate参数类型动态绑定；绑定父节点泛型的版本又限制了子节点的标签类型。可以通过映射类型+联合类型+递归的方式解决，定义如下类型：

type ElementCreatorParameters = {
  [T in keyof HTMLElementTagNameMap]: {
    tagName: T;
    children?: ElementCreatorParameters[];
    onCreate?: (element: HTMLElementTagNameMap[T]) => void;
  };
}[keyof HTMLElementTagNameMap];

原理说明 #

1. 遍历所有HTML标签生成专属类型：通过映射类型遍历HTMLElementTagNameMap的所有合法标签名，为每个标签生成独立的类型结构，其中tagName固定为当前标签，onCreate的参数类型自动匹配该标签对应的HTML元素类型。
2. 合并为联合类型实现自动推断：通过索引访问将所有标签专属类型合并为联合类型，TypeScript会根据对象的tagName值自动匹配对应类型分支，精准推断onCreate的参数类型。
3. 递归支持任意子节点：children字段定义为ElementCreatorParameters[]，允许子节点使用任意标签类型，完全满足嵌套需求。

验证示例 #

使用你给出的对象结构，TypeScript会自动完成类型推断：

const config: ElementCreatorParameters = {
  tagName: 'form',
  onCreate: (element) => {
    // element 自动推断为 HTMLFormElement
    element.method = 'POST'; // 合法，无类型报错
  },
  children: [
    {
      tagName: 'input',
      onCreate: (element) => {
        // element 自动推断为 HTMLInputElement
        element.type = 'text'; // 合法，无类型报错
      },
      children: [
        {
          tagName: 'a',
          onCreate: (element) => {
            // element 自动推断为 HTMLAnchorElement
            element.href = '/'; // 合法，无类型报错
          },
        },
      ]
    },
  ],
};

备选泛型方案 #

如果你更倾向于泛型实现，也可以定义不绑定父节点类型的递归泛型：

type ElementCreatorParameters<T extends keyof HTMLElementTagNameMap = keyof HTMLElementTagNameMap> = {
  tagName: T;
  children?: ElementCreatorParameters[];
  onCreate?: (element: HTMLElementTagNameMap[T]) => void;
};

该版本通过默认泛型参数，让TypeScript自动推断每个节点的标签类型，同样能满足需求。

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