Γραφομηχανή: χύτευση 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, δεν Nodes δύναμη-χυτό σε HTMLElements
• ένα ζεστό fuzzy αίσθημα για να κάνει το σωστό

Δοκιμάστε αυτό:

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δεν είναι ένα πραγματικό array (π.χ. δεν περιέχει .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.

Αφήστε το compiler κάνει τη δουλειά για σας και να πάρετε τα λάθη όταν οι υποθέσεις σας αποδειχθούν λανθασμένες.

Μπορεί να φαίνεται υπερβολή σε αυτή την περίπτωση, αλλά αυτό θα σας βοηθήσει πολύ αν έρθει αργότερα και να αλλάξετε τον επιλογέα, όπως η προσθήκη μιας κατηγορίας που λείπει από το dom, για παράδειγμα.

Αυτό φαίνεται να λύσει το πρόβλημα, χρησιμοποιώντας τον [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) αν γραφομηχανή θα καθορίσει HTMLCollection αντί NodeList ως ένα είδος επιστροφής.

DOM4 καθορίζει επίσης αυτό ως σωστό τύπο επιστροφής, αλλά τα μεγαλύτερα προδιαγραφές DOM είναι λιγότερο σαφείς.

Δείτε επίσης 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 του DOM που μοιάζει με αυτό:

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

Αυτό σημαίνει ότι, στη γραφομηχανή, όταν σας καλούν π.χ. document.createElement ( «βίντεο»), γραφομηχανή γνωρίζει η τιμή επιστροφής είναι μια HTMLVideoElement και θα είναι σε θέση να διασφαλίσετε ότι θα αλληλεπιδρούν σωστά με το API DOM βίντεο χωρίς να χρειάζεται να πληκτρολογήσετε διεκδικούν.

Δεδομένου ότι είναι ένα 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];