TypeScript: การหล่อ HTMLElement

ไม่มีใครรู้วิธีการส่งใน TypeScript หรือไม่

ฉันพยายามทำสิ่งนี้:

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

ฉันไม่สามารถเข้าถึงสมาชิก 'ประเภท' ขององค์ประกอบสคริปต์ได้เว้นแต่ฉันจะแปลงเป็นประเภทที่ถูกต้อง แต่ฉันไม่ทราบวิธีการทำเช่นนี้ ฉันค้นหาเอกสารและตัวอย่าง แต่ฉันไม่พบอะไรเลย

TypeScript ใช้ '<>' เพื่อล้อมรอบ casts ดังนั้นข้างต้นจะกลายเป็น:

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

ในฐานะของ TypeScript 0.9 lib.d.tsไฟล์ใช้ลายเซ็นโอเวอร์โหลดพิเศษที่ส่งกลับประเภทที่ถูกต้องสำหรับการโทรgetElementsByTagNameการใช้ไฟล์เฉพาะลายเซ็นเกินที่ส่งกลับประเภทที่ถูกต้องสำหรับการโทรไป

ซึ่งหมายความว่าคุณไม่จำเป็นต้องใช้การยืนยันประเภทเพื่อเปลี่ยนประเภท:

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

อย่าพิมพ์ตัวละคร ไม่เคย ใช้ยามประเภท:

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 ในกรณีนี้ แต่มันจะช่วยคุณได้มากถ้าคุณกลับมาใหม่ในภายหลังและเปลี่ยนตัวเลือกเช่นเพิ่มคลาสที่หายไปใน dom

คุณสามารถแฮ็คระบบประเภทได้ตลอดเวลาโดยใช้:

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

เพื่อท้ายด้วย:

• Arrayวัตถุจริง(ไม่ใช่NodeListแต่งตัวเป็นArray )
• รายการที่รับประกันว่าจะรวมเฉพาะHTMLElementsไม่ใช่Nodes-casted ไปยังHTMLElements
• ความรู้สึกเลือนที่อบอุ่นในการทำสิ่งที่ถูกต้อง

ลองสิ่งนี้:

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);
        }
    }
}

สนุก.

เราสามารถพิมพ์ตัวแปรของเราด้วยประเภทผลตอบแทนที่ชัดเจน :

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

หรือยืนยันเป็น (จำเป็นต้องมีTSX ):

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

หรือในกรณีที่ง่ายกว่ายืนยันด้วยไวยากรณ์วงเล็บมุม

การยืนยันประเภทเป็นเหมือนนักแสดงประเภทในภาษาอื่น แต่ไม่มีการตรวจสอบพิเศษหรือปรับโครงสร้างข้อมูล มันไม่มีผลกระทบต่อรันไทม์และใช้โดยคอมไพเลอร์อย่างหมดจด

เอกสารอ้างอิง:

TypeScript - ประเภทพื้นฐาน - ยืนยันประเภท

เพียงชี้แจงนี้ถูกต้อง

ไม่สามารถแปลง 'NodeList' เป็น 'HTMLScriptElement []'

เป็นNodeListไม่ได้เป็นอาร์เรย์ที่เกิดขึ้นจริง (เช่นมันไม่ได้มี.forEach, .slice,.pushฯลฯ ... )

ดังนั้นหากแปลงHTMLScriptElement[]เป็นระบบชนิดคุณจะไม่ได้รับข้อผิดพลาดประเภทหากคุณพยายามโทรหาArray.prototypeสมาชิกในเวลารวบรวม แต่จะล้มเหลวในเวลาทำงาน

ดูเหมือนว่าจะแก้ปัญหาโดยใช้[index: TYPE]ไชโยเข้าถึงประเภท

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

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

สามารถแก้ไขได้ในไฟล์การประกาศ (lib.d.ts) หาก TypeScript จะกำหนด HTMLCollection แทนที่จะเป็น NodeList เป็นชนิดส่งคืน

DOM4 ยังระบุสิ่งนี้ว่าเป็นประเภทส่งคืนที่ถูกต้อง แต่ข้อกำหนด DOM ที่เก่ากว่านั้นไม่ชัดเจน

ดูเพิ่มเติมที่http://typescript.codeplex.com/workitem/252

เนื่องจากเป็น a 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);

ฉันยังจะแนะนำคำแนะนำการใช้เว็บไซต์

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (ดูด้านล่าง) และ https://www.sitepen.com/blog/2014/08/22/advanced -typescript แนวคิดคลาสประเภท /

TypeScript ยังช่วยให้คุณสามารถระบุชนิดการส่งคืนที่แตกต่างกันเมื่อมีการระบุสตริงที่แน่นอนเป็นอาร์กิวเมนต์ของฟังก์ชัน ตัวอย่างเช่นการประกาศโดยรอบของ TypeScript สำหรับวิธีการ createElement ของ DOM มีลักษณะดังนี้:

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

ซึ่งหมายความว่าใน TypeScript เมื่อคุณโทรเช่น document.createElement ('วิดีโอ') TypeScript รู้ว่าค่าส่งคืนเป็น HTMLVideoElement และจะสามารถมั่นใจได้ว่าคุณโต้ตอบอย่างถูกต้องกับ DOM Video API โดยไม่จำเป็นต้องพิมพ์คำยืนยันใด ๆ

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