你能在TypeScript中扩展一个htmldevelment吗？

我第一次制作了一个基于DOM的游戏。我想扩展HtmlDevice，但是在TypeScript中，HtmlDevice是一个接口

我想做这个伪类：

class QuizElement extends HTMLDivElement{

}

---

对不起，如果这个问题是疯狂的。我对DOM有点陌生，只是想，我可以在任何其他环境中扩展任何可视化类，所以我想它在这里是可以做到的

无法扩展

htmldevelment

，因为它未声明为类。这是有意义的，因为扩展底层本机类型没有意义

你有两个选择

选项1：机具

因为

htmldevelment

是一个接口，所以您可以实现它

class QuizElement implements HTMLDivElement {

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

备选案文2：授权

您可以公开希望在

QuizElement

类上可用的特定属性和方法，然后委托给实际的

htmldevelment

实例。下面的快速示例：

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';

类QuizElement{
私有元素：htmldevelment；
构造函数（id:string）{
this.element=document.getElementById（id）；
}
设置innerHTML（内容：字符串）{
this.element.innerHTML=内容；
}
}
var quizElement=新quizElement（“测验”）；
quizElement.innerHTML='Example'；

如果您愿意，也可以使用数据成员“扩展”HTMLDevice接口，因为它不是一个类，而不是使用extends，而是通过接口添加它。TypeScript接口是“开放式”接口，参见规范第85页的“声明合并”部分

例如，下面的示例将string类型的成员“mydata”添加到HtmlLevel接口

interface HTMLDivElement {

    mydata : string;

}

// now we can assign a value

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

 div.mydata = "test";

接口HtmlLevel{
mydata:string；
}
//现在我们可以赋值了
var div=document.getElementById（“myDiv”）；
div.mydata=“测试”；

有点晚了，但显然仍然无法扩展HtmlLevel。解决扩展DIV的一种简单方法：只需使用CSS使通用HTMLElement的行为类似于DIV

CSS

Javascript

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

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

---

这不是最好的方法，但它是有效的

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

函数MyElement（）{
var元素=document.createElement（“div”）；
element.viewInner=函数（）{
log（this，this.innerHTML）
};
返回元素；
}
var测试=新的MyElement（）；
test.innerHTML=“Hi”；
test.viewInner（）；//你好

节目真的很晚了，但现在又有了另一种方法。您可以创建一个新的接口，如

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

然后创建

QuizElement

对象，如

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

---

与其他建议的方法相比，这不会“污染”

htmldevelment

，在

QuizElement

的范围内有额外的字段，我将选择第二种方法，因为它看起来更简单、更干净！谢谢你花时间给我解释！：）一点也不疯狂。这实际上是很有可能的，而且比使用document.getElementById将div与类关联要好得多！您可以通过扩展HtmleElement来尝试。它起作用了！在这里查看更多文档：完成此操作后，我得到一个错误：“派生类的构造函数必须包含一个‘super’调用。”在构造函数中添加super（）后，我在Chrome浏览器开发工具中得到以下内容：“Uncaught TypeError:非法构造函数”。这可能是浏览器设置或编译器设置？如果编译到ES5，它将不起作用。如果我在codesandbox上测试它，它会工作：我确实需要添加super（）调用。

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