टाइपप्रति: कास्टिंग HTMLElement

टाइपप्रति 0.9 के रूप में lib.d.tsफ़ाइल विशेष अधिभार हस्ताक्षर करने के लिए कॉल के लिए सही प्रकार के लौटने का उपयोग करता है getElementsByTagName।

यह तुम अब प्रकार कथनों का उपयोग करने के प्रकार को बदलने की जरूरत का मतलब है:

// No type assertions needed
var script: HTMLScriptElement = document.getElementsByTagName('script')[0];
alert(script.type);

तुम हमेशा का उपयोग कर प्रकार प्रणाली हैक कर सकते हैं:

var script = (<HTMLScriptElement[]><any>document.getElementsByName(id))[0];

साथ अंत करने के लिए:

• एक वास्तविक Arrayवस्तु (एक नहीं NodeListएक तरह कपड़े Array)
• एक सूची है कि केवल करने के लिए गारंटी है में शामिल हैं HTMLElements, नहीं Nodeरों करने के लिए बल के casted HTMLElementरों
• सही काम करने के लिए एक गर्म फजी लग रहा है

इसे इस्तेमाल करे:

let nodeList : NodeList = document.getElementsByTagName('script');
let elementList : Array<HTMLElement> = [];

if (nodeList) {
    for (let i = 0; i < nodeList.length; i++) {
        let node : Node = nodeList[i];

        // Make sure it's really an Element
        if (node.nodeType == Node.ELEMENT_NODE) {
            elementList.push(node as HTMLElement);
        }
    }
}

का आनंद लें।

बस स्पष्ट करने के लिए, यह सही है।

करने के लिए 'NodeList' कनवर्ट नहीं कर सकता 'HTMLScriptElement []'

के रूप में एक NodeListएक वास्तविक सरणी नहीं है (उदाहरण के लिए यह शामिल नहीं है .forEach, .slice, .push, आदि ...)।

इस प्रकार अगर यह करने के लिए कनवर्ट किया HTMLScriptElement[]प्रकार प्रणाली में, आप कुछ ही प्रकार त्रुटियों अगर आप कॉल करने की कोशिश प्राप्त होता Array.prototypeसंकलन समय पर इस पर सदस्यों, लेकिन यह रन टाइम पर विफल हो जाएगा।

डाली न लिखें। कभी नहीँ। प्रकार गार्ड का उपयोग करें:

const e = document.getElementsByName("script")[0];
if (!(e instanceof HTMLScriptElement)) 
  throw new Error(`Expected e to be an HTMLScriptElement, was ${e && e.constructor && e.constructor.name || e}`);
// locally TypeScript now types e as an HTMLScriptElement, same as if you casted it.

संकलक आपके लिए काम करने और जब अपनी मान्यताओं गलत बाहर बारी त्रुटियों हो।

यह इस मामले में overkill लग सकता है, लेकिन यह आप के लिए एक बहुत मदद मिलेगी अगर आप बाद में वापस आकर बदल चयनकर्ता, उदाहरण के लिए, एक वर्ग है कि डोम में याद आ रही है जोड़ना।

इस समस्या को हल करने, का उपयोग कर रहा है [index: TYPE]सरणी एक्सेस प्रकार, खुश होती है।

interface ScriptNodeList extends NodeList {
    [index: number]: HTMLScriptElement;
}

var script = ( <ScriptNodeList>document.getElementsByName('foo') )[0];

अपडेट किया गया उदाहरण:

const script: HTMLScriptElement = document.getElementsByName(id).item(0) as HTMLScriptElement;

प्रलेखन:

टाइपप्रति - मूल प्रकार - प्रकार के दावे

घोषणा फ़ाइल (lib.d.ts) में हल किया जा सकता है, तो टाइपप्रति एक वापसी प्रकार के रूप में NodeList के बजाय HTMLCollection को परिभाषित करेगा।

DOM4 भी सही वापसी प्रकार के रूप में इस निर्दिष्ट करता है, लेकिन बड़े डोम विनिर्देशों कम स्पष्ट हैं।

यह भी देखें http://typescript.codeplex.com/workitem/252

मैं भी sitepen गाइड की सिफारिश करेंगे

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (देखें नीचे) और https://www.sitepen.com/blog/2014/08/22/advanced -typescript-अवधारणाओं वर्गों-प्रकार /

टाइपप्रति भी एक सटीक स्ट्रिंग एक समारोह के लिए एक तर्क के रूप में प्रदान की जाती है जब आप विभिन्न वापसी प्रकार निर्दिष्ट करने के लिए अनुमति देता है। उदाहरण के लिए, डोम के createElement विधि के लिए टाइपप्रति के परिवेश घोषणा इस तरह दिखता है:

createElement(tagName: 'a'): HTMLAnchorElement;
createElement(tagName: 'abbr'): HTMLElement;
createElement(tagName: 'address'): HTMLElement;
createElement(tagName: 'area'): HTMLAreaElement;
// ... etc.
createElement(tagName: string): HTMLElement;

इसका मतलब यह है, टाइपप्रति में, जब आप कॉल जैसे document.createElement ( 'वीडियो'), टाइपप्रति जानता वापसी मान एक HTMLVideoElement है और यह सुनिश्चित करना तो आपको यह स्पष्ट टाइप करने के लिए किसी भी आवश्यकता के बिना डोम वीडियो एपीआई के साथ सही ढंग से बातचीत कर रहे हैं सक्षम हो जाएगा।

चूंकि यह एक है NodeList, न कि कोई Array, तुम नहीं वास्तव में कोष्ठक का उपयोग कर या करने के लिए कास्टिंग होना चाहिए Array। संपत्ति रास्ता प्रथम नोड प्राप्त करने के लिए है:

document.getElementsByName(id).item(0)

आप सिर्फ इतना है कि डाली कर सकते हैं:

var script = <HTMLScriptElement> document.getElementsByName(id).item(0)

या, विस्तार NodeList:

interface HTMLScriptElementNodeList extends NodeList
{
    item(index: number): HTMLScriptElement;
}
var scripts = <HTMLScriptElementNodeList> document.getElementsByName('script'),
    script = scripts.item(0);

var script = (<HTMLScriptElement[]><any>document.getElementsByName(id))[0];