你能在TypeScript中扩展HTMLDivElement吗？

Question

我是第一次制作基于DOM的游戏.我想扩展HTMLDivElement,但是在TypeScript中,HTMLDivElement是一个接口.

我想做这个伪类:

class QuizElement extends HTMLDivElement{

}

对不起,如果这个问题很疯狂.我对DOM有些新意,只是想,我可以在任何其他环境中扩展任何视觉类,所以我想这里可行!

Answer 1

您无法扩展,HTMLDivElement因为它未声明为类.这是有道理的,因为底层的本机类型扩展没有意义.

您有两种备选方案.

选项1:实施!

因为HTMLDivElement是一个接口,你可以实现它...

class QuizElement implements HTMLDivElement {

您必须实现该接口的所有属性和方法.你可能不想这样做.

选项2:授权.

您可以公开要在QuizElement类上提供的特定属性和方法,然后委派给实际的HTMLDivElement实例.下面的简单示例:

class QuizElement {
    private element: HTMLDivElement;

    constructor(id: string) {
        this.element = <HTMLDivElement>document.getElementById(id);
    }

    set innerHTML(content: string) {
        this.element.innerHTML = content;
    }
}

var quizElement = new QuizElement('quiz');

quizElement.innerHTML = 'Example';

Answer 2

如果您愿意,也可以使用数据成员"扩展"HTMLDivElement接口,而不是使用extends,因为它不是类,而是通过接口添加它.TypeScript接口是"开放式"的,请参阅"声明合并"下的规范的第85页.

http://www.typescriptlang.org/Content/TypeScript%20Language%20Specification.pdf

例如,下面将类型为string的成员'mydata'添加到HTMLDivElement接口.

interface HTMLDivElement {

    mydata : string;

}

// now we can assign a value

 var div = <HTMLDivElement>document.getElementById("myDiv"); 

 div.mydata = "test";

Answer 3

演出确实晚了，但现在另一种方法是可能的。HTMLDivElement我们可以创建一个新的界面，而不是向界面添加字段，例如

interface QuizElement extends HTMLDivElement {
  quizScore: number;
  ...
}

然后创建QuizElement类似的对象

const quizzi: QuizElement = Object.assign(document.createElement("div"), {
  quizScore: 0,
  ...
});

与其他提出的方法相比，这不会“污染”HTMLDivElement范围内的其他字段QuizElement。