如何在TypeScript中根据标签名推导HTMLElement子类型并关联元素？

问题描述 #

我有一个用于创建DOM节点并返回该节点的函数，代码如下：

addElement: function ({
    parentNode,
    elementName,
    tagName,
  }) {
    // Creates and appends the new node.
    parentNode[elementName] = document.createElement(tagName);
    parentNode.appendChild(parentNode[elementName]);

    return parentNode[elementName];
  }

其中parentNode是父DOM元素，elementName是字符串（比如container），tagName是要创建的元素类型字符串（比如div）。现在的问题是：无法确定函数返回值和parentNode上新增属性的具体类型——返回值可能是HTMLDivElement、HTMLAreaElement等Element的扩展类型，parentNode的类型也存在同样的不确定性，请问如何在TypeScript中解决这个问题？

解决方案 #

可以利用TypeScript内置的**HTMLElementTagNameMap映射类型**来实现类型的精确推导，它已经预定义了所有HTML标签名与对应元素类型的关联关系（比如'div'对应HTMLDivElement，'a'对应HTMLAnchorElement）。结合泛型参数，就能让函数自动根据传入的tagName推导出精确的类型。

修改后的TypeScript代码如下：

// 定义函数参数的类型约束
interface AddElementOptions<TagName extends keyof HTMLElementTagNameMap, ElementName extends string> {
  parentNode: HTMLElement & Record<ElementName, HTMLElementTagNameMap[TagName]>;
  elementName: ElementName;
  tagName: TagName;
}

addElement: function<TagName extends keyof HTMLElementTagNameMap, ElementName extends string>({
  parentNode,
  elementName,
  tagName,
}: AddElementOptions<TagName, ElementName>): HTMLElementTagNameMap[TagName] {
  parentNode[elementName] = document.createElement(tagName);
  parentNode.appendChild(parentNode[elementName]);

  return parentNode[elementName];
}

代码解释 #

• 泛型约束：TagName被约束为HTMLElementTagNameMap的键，确保传入的tagName是合法的HTML标签名，TypeScript会自动根据该值推导出对应的元素类型。
• parentNode类型定义：HTMLElement & Record<ElementName, HTMLElementTagNameMap[TagName]>表示parentNode既是标准的HTMLElement，同时拥有一个名为elementName的属性，属性类型与当前tagName对应的元素类型完全匹配。
• 返回值类型：直接指定为HTMLElementTagNameMap[TagName]，调用函数时TypeScript会自动返回精确的元素类型，无需手动断言。

调用示例 #

const parentDiv = document.createElement('div');

// 自动推导出返回值为HTMLButtonElement
const childBtn = addElement({
  parentNode: parentDiv,
  elementName: 'submitBtn',
  tagName: 'button'
});

// 可以直接使用HTMLButtonElement的专属属性，无类型错误
childBtn.disabled = true;
childBtn.textContent = '提交';

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