你可以在TypeScript中擴展一個HTMLDivElement嗎？

我是第一次製作一款基於DOM的遊戲。我想擴展HTMLDivElement，但是在TypeScript中，HTMLDivElement是一個接口。你可以在TypeScript中擴展一個HTMLDivElement嗎？

我想這樣做僞類：

class QuizElement extends HTMLDivElement{ 

}

如果對不起這個問題是瘋了。我對DOM有點新鮮，只是想，我可以在任何其他環境中擴展任何視覺類，所以我猜這是可以的！

來源

2014-07-18 Clark

這並不瘋狂。這實際上很可能，並且比使用document.getElementById將div與類關聯起來要好得多！你可以通過擴展HTMLElement來嘗試。有用！查看更多文檔在這裏：https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements/Custom_Elements_with_Classes – Kokodoko

您不能擴展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';

來源

2014-07-18 12:24:25 Fenton

我會去第二個選項，因爲它似乎更少麻煩和更乾淨！感謝您花時間向我解釋！ :) – Clark

您也可以「擴展」與數據成員HTMLDivElement界面如果願意，不通過使用延伸，因爲它不是一類的，但通過經由接口添加。 TypeScript接口是「開放式」接口，請參見「聲明合併」下的規範第85頁。

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

例如，下面的添加類型字符串到HTMLDivElement接口的成員「MYDATA」。

interface HTMLDivElement { 

    mydata : string; 

} 

// now we can assign a value 

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

div.mydata = "test";

來源

2014-07-19 00:57:56 KnarfaLingus

你可以在TypeScript中擴展一個HTMLDivElement嗎？

回答

相關問題