为何document.createElement返回值无法赋值给HTMLElement约束的泛型？

你遇到的问题核心在于：document.createElement接收字符串类型的tagName时，TypeScript/JSDoc只能推断出返回值是HTMLElement，但业务逻辑中明确知道，用和原元素相同标签名创建的元素，类型必然和原元素一致（比如原元素是HTMLDivElement，新元素也一定是HTMLDivElement）。TypeScript无法自动识别这层关联，需要手动补充类型信息。

TypeScript 解决方案 #

直接通过类型断言告诉TypeScript，创建的元素类型就是泛型T：

function clone<T extends HTMLElement>(el: T): T {
    // 断言创建的元素类型为T，弥补TypeScript的类型推断局限
    const newEl = document.createElement(el.tagName) as T;
    
    // 复制元素属性与子节点（示例逻辑）
    newEl.innerHTML = el.innerHTML;
    Array.from(el.attributes).forEach(attr => {
        newEl.setAttribute(attr.name, attr.value);
    });
    
    return newEl;
}

报错原因解释 #

TypeScript的报错提示'HTMLElement' is not assignable to type 'T'，是因为泛型T可以是HTMLElement的任意子类型（比如HTMLButtonElement、HTMLInputElement），而document.createElement仅能保证返回HTMLElement，无法确认它就是具体的子类型T。我们的类型断言是安全的，因为DOM规范保证：相同标签名创建的元素必然属于同一构造函数类型。

JSDoc 解决方案 #

在纯JS中，需要通过JSDoc的类型断言语法，明确标记创建的元素类型为泛型T：

/**
 * @template {HTMLElement} T
 * @param {T} el
 * @returns {T}
 */
function clone(el) {
    // 双重类型标记：先断言createElement的返回值为T，再赋值给指定类型的变量
    /** @type {T} */
    const newEl = /** @type {T} */ (document.createElement(el.tagName));
    
    // 复制元素属性与子节点（示例逻辑）
    newEl.innerHTML = el.innerHTML;
    Array.from(el.attributes).forEach(attr => {
        newEl.setAttribute(attr.name, attr.value);
    });
    
    return newEl;
}

这里的/** @type {T} */ (document.createElement(...))是关键，它告诉VS Code的类型检查器：这个调用的返回值就是泛型T类型，从而消除类型不匹配的报错。

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