Typescript: turnare HTMLElement

Ca dactilografiate 0,9 lib.d.tsfișierul utilizează semnături de suprasarcină specializate care returnează tipurile corecte pentru apelurile către getElementsByTagName.

Acest lucru înseamnă că nu mai trebuie să utilizeze aserțiuni de tip pentru a schimba tipul:

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

Întotdeauna poate hack sistem de tip folosind:

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

Pentru a termina cu:

• un real Arrayobiect (nu NodeListîmbrăcat ca Array)
• o listă care nu este garantată doar includ HTMLElements, nu Nodes forță a turnat HTMLElements
• un sentiment cald neclare pentru a face ceea ce trebuie

Incearca asta:

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

Bucurați-vă.

Doar pentru a clarifica, acest lucru este corect.

Nu se poate converti „NodeList“ la „HTMLScriptElement []“

ca NodeListnu este o matrice reală ( de exemplu , nu conține .forEach, .slice, .pushetc ...).

Astfel , dacă a făcut conversia la HTMLScriptElement[]în sistemul de tip, ați obține nici o eroare de tip dacă ați încercat să sun Array.prototypemembri pe ea la momentul compilării, dar nu ar reuși în timpul rulării.

Nu tip turnat. Nu. Utilizați gărzi de tip:

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.

Să compilatorul să lucreze pentru tine și pentru a obține erori atunci când presupunerile se dovedesc greșite.

Se poate arata nejustificată, în acest caz, dar vă va ajuta foarte mult dacă te întorci mai târziu și schimba selectorul, cum ar fi adăugarea unei clase care lipsesc în dom, de exemplu.

Acest lucru pare să rezolve problema, folosind [index: TYPE]tipul de acces matrice, urale.

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

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

exemplu Actualizat:

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

Documentație:

Typescript - Tipuri de bază - afirmații de tip

Ar putea fi rezolvată în fișierul de declarație (lib.d.ts) în cazul în care ar defini typescript HTMLCollection în loc de NodeList ca un tip de întoarcere.

DOM4 precizează, de asemenea, ca acest tip de întoarcere corectă, dar caietul de sarcini mai mari DOM sunt mai puțin clare.

A se vedea , de asemenea , http://typescript.codeplex.com/workitem/252

Mi-ar recomanda, de asemenea, ghidurile sitepen

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (vezi mai jos) și https://www.sitepen.com/blog/2014/08/22/advanced concepte--typescript-clase-tipuri /

Typescript, de asemenea, vă permite să specificați diferite tipuri de returnare, atunci când un șir exact este furnizat ca argument pentru o funcție. De exemplu, declarația ambiantă typescript pentru metoda createElement DOM arata ca acest lucru:

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

Acest lucru înseamnă, dactilografiat, de exemplu, atunci când apelați document.createElement ( „video“), typescript cunoaște valoarea returnată este un HTMLVideoElement și va fi în măsură să vă asigurați că interacționează corect cu API-ul DOM video fără a fi nevoie să tastați assert.

Din moment ce este o NodeList, nu o Array, ar trebui să nu fie într - adevăr , folosind paranteze sau turnare pentru a Array. Modul de proprietate pentru a obține primul nod este:

document.getElementsByName(id).item(0)

Puteți arunca doar că:

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

Sau, extinde 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];