क्या आप टाइपस्क्रिप्ट में HTMLDivElement बढ़ा सकते हैं?

Question

मैं पहली बार एक डोम आधारित गेम बना रहा हूं। मैं HTMLDivElement को विस्तारित करना चाहता हूं, हालांकि टाइपस्क्रिप्ट में, HTMLDivElement एक इंटरफ़ेस है।

मैं इस छद्म वर्ग करना चाहते हैं:

class QuizElement extends HTMLDivElement{ 

} 

क्षमा करता है, तो इस सवाल का पागल है। मैं डोम के लिए कुछ नया हूँ, और सिर्फ सोचा, मैं किसी भी अन्य वातावरण में किसी भी दृश्य वर्ग का विस्तार कर सकता हूं, इसलिए मुझे लगता है कि यह यहां सक्षम है!

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 इंटरफ़ेस यदि आप चाहें तो, का उपयोग करके नहीं फैली हुई है, लेकिन इंटरफ़ेस के जरिए जोड़कर क्योंकि यह एक वर्ग नहीं है। टाइपस्क्रिप्ट इंटरफेस 'ओपन एंडेड' हैं, 'घोषणा विलय' के तहत स्पेस के पेज 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";