Czy można rozszerzyć HTMLDivElement w TypeScript?

Question

Po raz pierwszy tworzę grę opartą na DOM. Chciałbym rozszerzyć HTMLDivElement, jednak w TypeScript, HTMLDivElement jest interfejsem.

Chciałbym zrobić tę klasę pseudo:

class QuizElement extends HTMLDivElement{ 

} 

Przepraszam, jeśli to pytanie jest szalony. Jestem trochę nowy w DOM i pomyślałem, że mogę rozszerzyć dowolną klasę wizualną w każdym innym środowisku, więc myślę, że jest to możliwe tutaj!

Answer 1

Nie można przedłużyć HTMLDivElement, ponieważ nie jest ona zadeklarowana jako klasa. Ma to sens, ponieważ ukryty rodzimy typ nie ma sensu rozszerzać.

Masz dwie alternatywne opcje.

Opcja 1: Implementuje!

Ponieważ HTMLDivElement to interfejs, można wdrożyć go ...

class QuizElement implements HTMLDivElement { 

Trzeba by wdrożyć wszystkie właściwości i metod interfejsu. Prawdopodobnie nie chcesz tego robić.

Opcja 2: Delegacja.

Możesz ujawnić konkretne właściwości i metody, które chcesz udostępnić w klasie QuizElement, a następnie przekazać je do rzeczywistej instancji HTMLDivElement. Krótki przykład poniżej:

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

Ponadto można „rozszerzyć” interfejs HTMLDivElement z członków danych, jeśli chcesz, a nie za pomocą rozciąga ponieważ nie jest klasą, ale przez dodanie go przez interfejs. Interfejsy TypeScript są "otwarte", patrz strona 85 specyfikacji w punkcie "zgrupowanie deklaracji".

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

na przykład poniżej dodaje członkowskiego „mydata” typu ciąg do interfejsu HTMLDivElement.

interface HTMLDivElement { 

    mydata : string; 

} 

// now we can assign a value 

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

div.mydata = "test";