Question

我有一个基类和一个或多个从它扩展的子类。我试图实现轻松创建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对象，它没有source（）方法。

Answer 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

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

1 个答案: