如何让TypeScript认可类动态实现接口？

问题核心 #

你希望通过Proxy让MyElement类的实例同时具备自身方法和目标HTMLElement的所有属性/方法，且不想在每次链式调用时手动做MyElement<T> & T的类型断言。

解决方案 #

TypeScript不支持类直接实现泛型类型参数（即implements T会报错），我们可以通过类型合并+一次性断言的方式，让实例类型自动成为MyElement<T> & T，从而避免重复转换。

修改后的代码如下：

// 定义类型别名简化复用
type ElementProxy<T extends HTMLElement> = MyElement<T> & T;

class MyElement<T extends HTMLElement> {
    elem: T;

    static create<T extends HTMLElement>(elem: T): ElementProxy<T> {
        return new MyElement(elem) as ElementProxy<T>;
    }

    constructor(elem: T) {
        this.elem = elem;
        const self = this;
        // 构造函数返回Proxy，并断言为合并类型
        return new Proxy(self, {
            get(_, prop) {
                // 优先访问MyElement自身属性/方法
                if (prop in self) {
                    return self[prop as keyof typeof self];
                }
                // 不存在则转发到目标元素
                return self.elem[prop as keyof T];
            }
        }) as ElementProxy<T>;
    }

    find<E extends HTMLElement = HTMLElement>(selector: string): ElementProxy<E> {
        const foundElem = this.elem.querySelector(selector)!;
        return new MyElement<E>(foundElem) as ElementProxy<E>;
    }
}

// 使用示例：无需额外类型转换，链式调用类型自动识别
const body = MyElement.create(document.body as HTMLBodyElement);
console.log(body.find('div').tagName); // 正确识别tagName属性

关键说明 #

1. 移除implements T：TypeScript不允许类实现泛型类型参数，这会导致编译错误，我们改用类型合并的方式实现类型兼容。
2. 类型别名ElementProxy：复用MyElement<T> & T的合并类型，让代码更简洁。
3. 一次性类型断言：仅在create、构造函数、find方法中做一次类型断言，后续所有链式调用的返回值都会自动继承合并类型，无需重复转换。
4. Proxy逻辑保留：运行时依然保持原有的属性转发逻辑，优先访问MyElement自身的方法，不存在时再转发到内部的elem实例。

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