javascript - 返回自身数组的类方法。如何注释和继承？

Question

下面的示例是真实代码中发生的事情的原始表示(我没有使用 HTML 或前端。下面的代码是一个虚拟代码。如果从前端的 Angular 来看它没有任何意义，请见谅)
TL，博士
我正在努力指定方法的返回类型，该方法将返回类 的类实例数组调用此方法的来源 .
回到虚拟代码:
PageElement.ts

class PageElement {
    public element: HTMLElement
    constructor(
        public elementSelector: string,
        public elementName: string,
        public description: string,
        
    ) {
        this.element = document.getElementById(this.elementSelector)!;
        
    }
 
    getAll() {
        let foundElements = document.querySelectorAll(this.elementSelector);
        let returnElements = [];
        let constructor = this.constructor as any;
        foundElements.forEach(
            element => returnElements.push(
                new constructor(
                    element.attributes['id'].value,
                    this.elementName + (returnElements.length + 1),
                    this.description
                )
            )
        )
 
        return returnElements;
    }
}

假设这个类有很多子类，例如:

class InputElement extends PageElement {
    constructor(
        elementSelector: string, 
        elementName: string, 
        description: string) {
        super(elementSelector, 
            elementName, 
            description
        )
    }
 
    exclusiveInputMethod() {
        // this method exist only on InputElement 
    }
}

我想解决两个核心问题

getAll() {
        let constructor = this.constructor as any;
}

上面的逻辑在 JS 中运行良好，例如 new this.constructor(...) .
但是，TS 不允许这样做，但出现错误:This expression is not constructable. Type 'Function' has no construct signatures.ts(2351)所以我需要做let constructor = this.constructor as any; .但这会扼杀 IntelliSense 和所有类型安全。
当然，您可以说:“只需返回 PageElement 的数组即可。 ，呃”:

getAll() {
        let foundElements = document.querySelectorAll(this.elementSelector);
        let returnElements = [];
        foundElements.forEach(
            element => returnElements.push(
                new PageElement(
                    element.attributes['id'].value,
                    this.elementName + (returnElements.length + 1),
                    this.description
                )
            )
        )
 
        return returnElements;
    }

但是继承的问题就出现在这里:

class InputElement extends PageElement {
    constructor(
        elementSelector: string, 
        elementName: string, 
        description: string) {
        super(elementSelector, 
            elementName, 
            description
        )
    }
 
    exclusiveInputMethod() {
        // do stuff
    }
}

万一getAll将返回 PageElement 的数组我将无法访问 exclusiveInputMethod .因为当我调用 InputElement.findAll()它将返回 PageElement[]而不是 InputElement[] .
我将总结我的问题:new this.constructor 的正确等价物是什么？对于 TS，它知道我正在创建这个特定类的实例吗？
第二个问题是(嗯，其实和第一个一样):
如何注释(或使 TS 正确推断返回类型)方法 getAll()所以它总是知道返回类型是调用此方法的类实例的数组？

Answer 1

指定 this[]作为您的方法的返回类型:

class PageElement {
  getAll(): this[]  {}
}

class InputElement extends PageElement {
  aSpecificInputElementMethod() {}
}

const inputElement = new InputElement();
const inputElements = inputElement.getAll();

inputElements[0].aSpecificInputElementMethod(); // valid;

在 TS Playground 上查看实际情况.