টাইপস্ক্রিপ্ট: কাস্টিং এইচটিএমলেমেন্ট


197

কেউ কি টাইপস্ক্রিপ্টে কাস্ট করতে জানেন?

আমি এটি করার চেষ্টা করছি:

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

আমি স্ক্রিপ্ট উপাদানটির 'টাইপ' সদস্যকে অ্যাক্সেস করতে পারি না যদি না আমি এটি সঠিক ধরণের কাছে না ফেলে, তবে কীভাবে এটি করতে হয় তা আমি জানি না। আমি দস্তাবেজগুলি এবং নমুনাগুলি অনুসন্ধান করেছি, কিন্তু আমি কিছুই খুঁজে পেলাম না।


মনে রাখবেন যে এই castালাইয়ের সমস্যাটি আর 0.9-এ বিদ্যমান নেই - নীচে @ স্টিভের উত্তর দেখুন।
গ্রেগ গাম

@ গ্রেগগম আমি স্টিভ
স্টিভ শ্রাবের

উত্তর:


255

টাইপস্ক্রিপ্ট চারপাশের বর্ণগুলিকে '<>' ব্যবহার করে, তাই উপরেরটি হয়ে যায়:

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];

আমার মনে হয় তাদের এগুলি আরও খতিয়ে দেখা উচিত, ধরুন আপনি use ('[টাইপ: ইনপুট]') ব্যবহার করেন। প্রত্যেকটি (ফাংশন (সূচক, উপাদান) এবং আপনাকে কোন সম্পত্তি সেট করতে হবে তার উপর নির্ভর করে আপনার এইচটিএমএল ইনপুটমেন্ট বা এইচটিএমএলইলেক্টিমেন্টে কাস্ট করা দরকার need / get, ingালাইয়ের ব্যবহার (<এইচটিএমএলসিলিট এলিমেন্ট <<<< উপাদান) .নির্বাচিত ইন্ডেক্স = 0; যোগ () উপাদানটির চারপাশে,
একধরণের

+1 টি যে আমার প্রশ্নের উত্তর stackoverflow.com/questions/13669404/...
lhk

দীর্ঘমেয়াদে (০.৯. আউট হওয়ার পরে) আপনার এটিকে নোডলিস্ট <HtmlScriptElement> এর মতো কিছুতে কাস্ট করতে সক্ষম হওয়া উচিত, এবং getElementsByName কোনওরকম castালাই ছাড়াই এই অধিকার পেতে স্ট্রিং আক্ষরিক ধরণের ওভাররাইড ব্যবহার করতে সক্ষম হবে!
পিটার বার্নস

3
1.0 এর পরে বাক্য গঠনটি হওয়া উচিত(<NodeListOf<HTMLScriptElement>>document.getElementsByName(id))[0];
উইল হুয়াং

1
আপনি castালাই হিসাবে ব্যবহার করতে পারেন। var স্ক্রিপ্ট = ডকুমেন্ট.জেট এলিমেন্টসাইওয়াইনেম ("স্ক্রিপ্ট") [0] এইচটিএমএল স্ক্রিপ্টএলিমেন্ট হিসাবে;
জেজিএফএমকে

36

টাইপস্ক্রিপ্ট ০.৯ হিসাবে lib.d.tsফাইলটি বিশেষ ওভারলোড স্বাক্ষর ব্যবহার করে যা কলগুলির জন্য সঠিক ধরণের ফেরত দেয় getElementsByTagName

এর অর্থ এই প্রকারটি পরিবর্তন করতে আপনাকে আর ধরণের সংকেত ব্যবহার করার দরকার নেই:

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

আপনি কীভাবে এটি অবজেক্ট নোটেশনে করবেন? অর্থাত্ আমি do নাম: <এইচটিএমএল ইনপুট এলিমেন্ট>: ডকুমেন্ট.কোয়ারী নির্বাচনকারী ('# অ্যাপ-ফর্ম [নাম]') মান করতে পারি না value
নিকোস

3
এটি কাজ করেছে: নাম: (<এইচটিএমএল ইনপুটলমেন্ট> ডকুমেন্ট.কোয়ারী নির্বাচনকারী ('# অ্যাপ-ফর্ম [নাম]')) মান,
নিকোস

21

আপনি সর্বদা ব্যবহার করে টাইপ সিস্টেম হ্যাক করতে পারেন:

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

<কোনো> পলায়নের অনুমতি দেয় ধরনের পরীক্ষা করা আদর্শ কিন্তু ঠান্ডা না ব্যবহার করার সময় উন্নয়ন
চামচিকা

21

Castালাই টাইপ করবেন না। কখনও। প্রকারের প্রহরী ব্যবহার করুন:

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.

সংকলকটি আপনার জন্য কাজ করতে দিন এবং আপনার অনুমানগুলি ভুল হয়ে গেলে ত্রুটিগুলি পান।

এটি এক্ষেত্রে ওভারকিল দেখতে পারে তবে আপনি যদি পরে ফিরে এসে নির্বাচককে পরিবর্তন করেন তবে উদাহরণস্বরূপ ডোমের অনুপস্থিত একটি ক্লাস যুক্ত করার মতো এটি আপনাকে অনেক সাহায্য করবে।


13

এর সাথে শেষ পর্যন্ত:

  • একটি আসল Arrayবস্তু (একটি NodeListপোষাক হিসাবে না Array)
  • একটি তালিকা যেটি শুধুমাত্র নিশ্চয়তা তা অন্তর্ভূক্ত HTMLElementsনয় Nodes করা জোর 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);
        }
    }
}

উপভোগ করুন।


10

আমরা আমাদের পরিবর্তনশীল একটি সুস্পষ্ট রিটার্ন টাইপের সাথে টাইপ করতে পারি :

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

অথবা জাহির যেমন (সঙ্গে প্রয়োজন TSX ):

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

অথবা সহজ ক্ষেত্রে অ্যাঙ্গেল-ব্র্যাকেট সিনট্যাক্স সহ দৃ sert ়তা দিন।


একটি টাইপ জোর দেওয়া অন্যান্য ভাষায় টাইপ কাস্টের মতো, তবে কোনও বিশেষ পরীক্ষণ বা ডেটা পুনর্গঠন করে না। এটির কোনও রানটাইম প্রভাব নেই এবং সংকলক বিশুদ্ধরূপে ব্যবহৃত হয়।

ডকুমেন্টেশন:

টাইপস্ক্রিপ্ট - বেসিক প্রকার - নিবন্ধগুলি টাইপ করুন


9

কেবল পরিষ্কার করার জন্য, এটি সঠিক।

'নোডলিস্ট' কে 'এইচটিএমএল স্ক্রিপ্টইলেট []' তে রূপান্তর করা যায় না

হিসাবে একটি NodeListপ্রকৃত অ্যারের নয় (যেমন এটি ধারণ করে না .forEach, .slice,.push , ইত্যাদি ...)।

সুতরাং এটি যদি HTMLScriptElement[]টাইপ সিস্টেমে রূপান্তরিত হয় তবে আপনি সংকলনকালে Array.prototypeসদস্যদের কল করার চেষ্টা করলে আপনি কোনও ধরণের ত্রুটি পাবেন না , তবে এটি রান সময়ে ব্যর্থ হবে।


1
অনুমোদিত এটি সঠিক, তবে সম্পূর্ণ কার্যকর নয় not বিকল্পটি হ'ল 'যে
কোনও'র

3

এটি [index: TYPE]অ্যারে অ্যাক্সেসের ধরণটি, চিয়ার্স ব্যবহার করে সমস্যার সমাধান করছে বলে মনে হচ্ছে ।

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

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

1

ডিক্লারেশন ফাইল (lib.d.ts) এ সমাধান করা যেতে পারে যদি টাইপস্ক্রিপ্ট কোনও নোডলিস্টের পরিবর্তে ফেরতের ধরণ হিসাবে এইচটিএমএল সংগ্রহের সংজ্ঞা দেয়।

DOM4 এটিকে সঠিক ফেরতের প্রকার হিসাবেও নির্দিষ্ট করে তবে পুরনো ডিওএম স্পেসিফিকেশন কম স্পষ্ট হয়।

Http://tyypecript.codeplex.com/workitem/252 এও দেখুন


0

যেহেতু এটি একটি 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);

1
আপডেট আপডেট এখন কাস্টিংয়ের মতো দেখাচ্ছে: const script = document.getElementsByName(id).item(0) as HTMLScriptElement;
মাইক কেসি

এটি, টিএস 2.3 এর জন্য "এরকম দেখাচ্ছে"।
বিপণনকারী

0

আমি সিটিপেন গাইডদেরও সুপারিশ করব

https://www.sitepen.com/blog/2013/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 and এবং এটি নিশ্চিত করতে সক্ষম হবে যে আপনি ডিওএম ভিডিও এপিআইয়ের সাথে সঠিকভাবে কথোপকথনটি টাইপ করার দরকার নেই।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.