Tapuscrit: casting HTMLElement

Comme dactylographiées 0,9 le lib.d.tsfichier utilise les signatures de surcharge spécialisées qui renvoient les bons types pour les appels vers getElementsByTagName.

Cela signifie que vous ne devez plus utiliser les assertions de type pour changer le type:

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

Vous pouvez toujours pirater le système de type en utilisant:

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

Pour finir avec:

• un véritable Arrayobjet (pas NodeListhabillé comme un Array)
• une liste qui est garanti pour inclure uniquement HTMLElements, et non Nodede la force casté à HTMLElements
• un sentiment positif à faire la bonne chose

Essaye ça:

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

Prendre plaisir.

Juste pour clarifier, cela est exact.

Impossible de convertir « NodeList » à « HTMLScriptElement [] »

comme NodeListest pas un tableau réel (par exemple , il ne contient pas .forEach, .slice, .push, etc ...).

Ainsi , si elle a fait convertir HTMLScriptElement[]si vous avez essayé d'appeler dans le système de type, vous obtiendrez aucune erreur de type Array.prototypemembres à ce sujet au moment de la compilation, mais il échoueriez au moment de l' exécution.

Ne tapez pas coulé. Jamais. Utilisez les gardes de 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.

Laissez le compilateur faire le travail pour vous et obtenir des erreurs lors de vos hypothèses se tromper.

Il peut sembler exagéré dans ce cas, mais il vous aidera beaucoup si vous revenez plus tard et changer le sélecteur, comme l'ajout d'une classe qui manque dans le Royaume, par exemple.

Cela semble résoudre le problème, en utilisant le [index: TYPE]type d'accès de tableau, acclamations.

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

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

exemple Mise à jour:

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

Documentation:

Tapuscrit - Types de base - assertions de type

Pourrait être résolu dans le fichier de déclaration (lib.d.ts) si tapuscrit définirait HTMLCollection au lieu de NodeList comme type de retour.

DOM4 précise également ce que le type de retour correct, mais les anciennes spécifications DOM sont moins claires.

Voir aussi http://typescript.codeplex.com/workitem/252

Je recommande aussi les guides SitePen

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (voir ci - dessous) et https://www.sitepen.com/blog/2014/08/22/advanced -typescript-concepts-classes-types /

Tapuscrit vous permet également de spécifier différents types de retour quand une chaîne exacte est fourni comme argument à une fonction. Par exemple, la déclaration ambiante de tapuscrit pour la méthode createElement DOM ressemble à ceci:

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

Cela signifie, dactylographiée, par exemple lorsque vous appelez document.createElement ( « video »), tapuscrit connaît la valeur de retour est un HTMLVideoElement et sera en mesure de vous assurer interagissez correctement avec l'API vidéo DOM sans avoir besoin de taper assert.

Comme il est un NodeList, pas Array, vous ne devriez pas vraiment l' aide de supports ou de coulée à Array. La façon dont la propriété pour obtenir le premier noeud est:

document.getElementsByName(id).item(0)

Vous pouvez juste jeter que:

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

Ou, étendre 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];