Javascript 抽象静态属性

Question

出于教育目的，我正在尝试在没有框架的情况下使用 Javascript 中的 CustomElements。我正在尝试为我的 CustomElements 编写一个基类，用于加载模板并设置 ShadowDOM。由于 CustomElement 的模板取决于实际的实现，我发现自己想要“抽象静态属性”。

abstract class CustomElement extends HTMLElement {
    abstract static template: HTMLTemplateElement;

    constructor() {
        super();
        this.shadow_root = this.attachShadow({ "mode": "open" });
        this.shadow_root.appendChild(this.constructor.template.content.cloneNode(true)); // How can can I tell typescript, that the constructor does in fact have a template property?
    }    
}

class CustomCircle extends CustomElement {
    static override template = loadTemplate(`CircleTemplate`); // I want this to be static (only do the loading work once, and enforce that everyone implementing "CustomElement" has it

    constructor() {
        super();
        ...
    }
}



class CustomRectangle extends CustomElement {
    static override template = loadTemplate(`RectangleTemplate`);

    constructor() {
        super();
        ...
    }
}

现在 TypeScript 不支持

abstract static

，我最好的表达方式是什么？扩展

CustomElement

的每个类必须具有（静态）模板属性？ （额外：我如何告诉打字稿

this.constructor

保证具有

template

属性？）

Answer 1

根据here中的答案，似乎以下内容应该按照您的要求进行

interface CustomConstructor {
    new(): CustomElement;
    template: HTMLElement;
}
abstract class CustomElement extends HTMLElement {

    constructor() {
        super();
        this.shadow_root = this.attachShadow({ "mode": "open" });
        this.shadow_root.appendChild(this.constructor.template.content.cloneNode(true));
    }    
}

const CustomCircle: CustomConstructor = class CustomCircle extends CustomElement {
    static template = loadTemplate(`CircleTemplate`);

    constructor() {
        super();
    }
}



const CustomRectangle: CustomConstructor = class CustomRectangle extends CustomElement {
    static template = loadTemplate(`RectangleTemplate`);

    constructor() {
        super();
    }
}

如果你在 TS Playground 中玩弄代码，你会发现如果一个类没有

static template

，TS 会抱怨