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 范围内的其他字段。

Answer 4

有点晚了，但是显然仍然无法扩展HTMLDivElement。解决扩展DIV的一种简单方法：只需使用CSS即可使通用HTMLElement表现得像div。

CSS

 my-element {
    display:block;
 }

JavaScript

class MyElement extends HTMLElement{
  constructor(){
      this.innerHTML = "I behave exactly like a div"
  }
}

window.customElements.define('my-element', MyElement);

Answer 5

这不是最好的方法，但是它可行。

function MyElement(){
  var element = document.createElement("div");

  element.viewInner = function(){
    console.log(this, this.innerHTML)
  };

  return element;
}

var test = new MyElement();
test.innerHTML = "Hi";
test.viewInner(); // <div> Hi

你能在TypeScript中扩展HTMLDivElement吗？

5 个答案: