泛型 - 在 TypeScript 中，如何从基类返回子类？

我有一个基类和一个或多个从它继承的子类。我正在尝试实现轻松创建 HTML 元素的功能。

我的第一个类是基类，包含所有 HTML 元素的通用方法：

class $NewElement<E extends HTMLElement> {

    public element: E = null;

    constructor(name: string) {
        this.element = <E>document.createElement(name);
    }

    public className(className: string): any {
        this.element.className = className;
        return this;
    }

}

我有其他类，每个类都继承上述类。例如，这是用于 img 标签的类：

class $NewImage extends $NewElement<HTMLImageElement> {

    constructor() {
        super('img');
    }

    public source(fileName: string): $NewImage {
        this.element.src = fileName;
        return this;
    }

}

我想以类型安全的方式做类似这样的事情：

let img = new $NewImage().className('a').source('b').element;

这该如何完成？调用 className() 后，我不再处理一个 $NewImage 对象，而是一个 $NewElement 对象，而 $NewElement 对象没有 source() 方法。

答案＃1

您可以将 this 用作一种类型，这意味着返回类型与调用此方法的类型相同：

class $NewElement<E extends HTMLElement> {
    public element: E;
    constructor(name: string) {
        this.element = <E>document.createElement(name);
    }
    public className(className: string): this {
        this.element.className = className;
        return this;
    }
}

class $NewImage extends $NewElement<HTMLImageElement> {
    constructor() {
        super('img');
    }
    public source(fileName: string): this {
        this.element.src = fileName;
        return this;
    }
}

let img = new $NewImage().className('a').source('b').element; //works