TypeScript构造返回HTMLTemplateElement时类型报错解决方法

当自定义Template类继承HTMLTemplateElement时，直接使用new创建实例不符合规范。
为绕过该限制，现有实现逻辑是在Template构造函数中通过document.getElementById(id)获取原生HTMLTemplateElement实例，合并类自身属性后返回，实现代码如下：

export class Template {
    private htmlTemplateElement: HTMLTemplateElement;
    constructor(id: string) {
        this.htmlTemplateElement = document.getElementById(id) as HTMLTemplateElement;
        return Object.assign(this.htmlTemplateElement, this) 
    }

    public test = () => this.htmlTemplateElement.innerHTML
}

若DOM中存在对应id的HTML Template元素，可通过如下代码创建Template实例并调用扩展方法test()：

const template = new Template(id)
console.log(template.test())
console.log(template.innerHTML) 

运行时上述两行console.log()均可正常工作，在控制台输出正确内容，但TypeScript编译器会对template.innerHTML的访问抛出错误，提示innerHTML属性不存在于Template类型上。
此前尝试过export class Template extends HTMLTemplateElement的写法，但由于无法通过new合法创建继承内置HTML元素的类实例，该方案不可行，需要补充正确的类型定义消除编译报错。

报错的核心原因是TypeScript默认类构造函数的返回类型为类自身的原始实例类型，不会识别构造函数中手动返回的合并对象类型，通过TS的声明合并特性+构造函数返回值标注即可解决，无需修改现有运行时逻辑：

// 声明合并：将HTMLTemplateElement的所有属性、方法合并到Template实例类型上
export interface Template extends HTMLTemplateElement {}
export class Template {
    private htmlTemplateElement: HTMLTemplateElement;

    // 明确标注构造函数返回类型为合并后的Template类型
    constructor(id: string): Template {
        this.htmlTemplateElement = document.getElementById(id) as HTMLTemplateElement;
        return Object.assign(this.htmlTemplateElement, this) 
    }

    public test = () => this.htmlTemplateElement.innerHTML
}

方案说明：

• 同名接口和类的声明合并是TS的原生特性，会自动把HTMLTemplateElement上的所有属性（包括innerHTML、content等）和自定义类的方法合并到同一个实例类型上
• 构造函数显式标注返回值后，TS不会再使用默认的类实例类型推导，会按照声明合并后的类型做校验
• 该方案不需要走自定义内置元素的注册流程，完全兼容现有运行时逻辑，由于自定义方法均为箭头函数实现，也不会出现this指向错乱问题

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