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

Question

क्या कोई जानता है कि टाइपस्क्रिप्ट में कैसे डालना है?

मैं यह करने की कोशिश कर रहा हूँ:

var script:HTMLScriptElement = document.getElementsByName("script")[0];
alert(script.type);

लेकिन यह मुझे एक त्रुटि दे रहा है:

Cannot convert 'Node' to 'HTMLScriptElement': Type 'Node' is missing property 'defer' from type 'HTMLScriptElement'
(elementName: string) => NodeList

जब तक मैं इसे सही प्रकार पर नहीं डाल देता, मैं स्क्रिप्ट तत्व के 'प्रकार' के सदस्य तक नहीं पहुँच सकता, लेकिन मुझे नहीं पता कि यह कैसे करना है। मैंने डॉक्स और नमूने खोजे, लेकिन मुझे कुछ नहीं मिला।

Comments

ध्यान दें कि यह कास्टिंग मुद्दा अब 0.9 में मौजूद नहीं है - नीचे दिए गए @ उत्तर द्वारा देखें।

— ग्रेग गम

@GregGum मैं स्टीव का जवाब नहीं देख रहा हूँ

— स्टीव स्क्रैब

Answer 1

टाइपस्क्रिप्ट जातियों को घेरने के लिए '<>' का उपयोग करता है, इसलिए ऊपर बन जाता है:

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

हालाँकि, दुर्भाग्य से आप ऐसा नहीं कर सकते:

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

आपको त्रुटि मिलती है

Cannot convert 'NodeList' to 'HTMLScriptElement[]'

लेकिन आप कर सकते हैं:

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

Comments

मुझे लगता है कि उन्हें इस पर और ध्यान देना चाहिए, मान लीजिए कि आप $ ('[प्रकार: इनपुट]') का उपयोग करते हैं। प्रत्येक (फ़ंक्शन (इंडेक्स, एलीमेंट)) और आपको HTMLInputElement या HTMLSelectElement में डाले जाने वाले तत्व की आवश्यकता होती है, जिसके आधार पर संपत्ति को सेट करने की आवश्यकता होती है। /, कास्टिंग उपयोग (<HTMLSelectElement> <any> तत्व) .selectedIndex = 0; जोड़ता है () तत्व के आसपास, बदसूरत की तरह

— rekna

+1 जिसने मेरे प्रश्न का उत्तर दिया stackoverflow.com/questions/13669404/…

— lhk

लंबे समय में (0.9 के बाद बाहर है) आप इसे NodeList <HtmlScriptElement> की तरह कुछ कास्ट करने में सक्षम होना चाहिए, प्लस getElementsByName किसी भी कास्टिंग के बिना यह अधिकार प्राप्त करने के लिए स्ट्रिंग शाब्दिक प्रकार ओवरराइड का उपयोग करने में सक्षम हो जाएगा!

— पीटर बर्न्स

1.0 के बाद, वाक्यविन्यास होना चाहिए(<NodeListOf<HTMLScriptElement>>document.getElementsByName(id))[0];

— हुआंग

आप कास्ट के रूप में भी उपयोग कर सकते हैं। var script = document.getElementsByName ("स्क्रिप्ट") [0] HTMLScriptElement के रूप में;

— JGFMK

Answer 2

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

इसका मतलब है कि अब आपको टाइप बदलने के लिए टाइप एसेरिज का उपयोग करने की आवश्यकता नहीं है:

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

Comments

आप इसे ऑब्जेक्ट नोटेशन में कैसे करते हैं? अर्थात मैं {name: <HTMLInputElement>: document.querySelector ('# ऐप-फ़ॉर्म [नाम]') नहीं कर सकता। मान,}

— निकोस

यह काम किया: नाम: (<HTMLInputElement> document.querySelector ('# ऐप-फ़ॉर्म [नाम]'))। मान,

— निकोस

Answer 3

आप हमेशा टाइप सिस्टम हैक कर सकते हैं:

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

Comments

<any> के उपयोग से बचने के प्रकार की जाँच करने की अनुमति मिलती है, आदर्श नहीं, लेकिन विकास के दौरान शांत

— शीर्षक

Answer 4

कास्ट टाइप न करें। कभी नहीँ। प्रकार गार्ड का उपयोग करें:

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.

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

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

Answer 5

के साथ समाप्त करने के लिए:

• एक वास्तविक 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);
        }
    }
}

का आनंद लें।

Answer 6

हम एक स्पष्ट वापसी प्रकार के साथ अपना चर टाइप कर सकते हैं :

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

या के रूप में जोर ( TSX के साथ की जरूरत है ):

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

या सरल मामलों में एंगल-ब्रैकेट सिंटैक्स के साथ जोर देते हैं ।

---

एक प्रकार का अभिकथन अन्य भाषाओं में एक टाइप कास्ट की तरह है, लेकिन डेटा की कोई विशेष जाँच या पुनर्गठन नहीं करता है। इसका कोई रनटाइम प्रभाव नहीं है, और कंपाइलर द्वारा शुद्ध रूप से उपयोग किया जाता है।

प्रलेखन:

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

Answer 7

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

'NodeList' को 'HTMLScriptElement []' में नहीं बदल सकते

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

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

Comments

यह सही है, हालांकि पूरी तरह से उपयोगी नहीं है। विकल्प 'किसी' के माध्यम से जाना है जो कोई उपयोगी प्रकार की जाँच नहीं करता है ...

— स्पॉन्जमैन

Answer 8

यह [index: TYPE]एरे एक्सेस प्रकार, चीयर्स का उपयोग करके समस्या को हल करने के लिए लगता है ।

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

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

Answer 9

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

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

Http://typescript.codeplex.com/workitem/252 भी देखें

Answer 10

चूंकि यह एक 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);

Comments

UPDATE कास्टिंग अब इस तरह दिखता है: const script = document.getElementsByName(id).item(0) as HTMLScriptElement;

— माइक केसे

अर्थात्, टीएस 2.3 के लिए "ऐसा दिखता है"।

— मार्कसेलर

Answer 11

मैं साइटपेन गाइडों की भी सिफारिश करूंगा

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

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

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

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

Answer 12

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