Dattiloscritto: fusione HTMLElement

A partire dal dattiloscritto 0,9 del lib.d.tsfile utilizza le firme di sovraccarico specializzati che restituiscono i tipi corretti per le chiamate verso getElementsByTagName.

Questo significa che non è più necessario utilizzare tipo asserzioni per cambiare il tipo:

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

È sempre possibile hackerare tipo di sistema utilizzando:

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

Per finire con:

• un effettivo Arrayoggetto (non un NodeListvestito come unArray )
• un elenco che è garantito per includere solo HTMLElements, non Nodes forza-casted aHTMLElement s
• una sensazione inebriante di fare la cosa giusta

Prova questo:

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

Godere.

Giusto per chiarire, questo è corretto.

Impossibile convertire 'NodeList' a 'HTMLScriptElement []'

come NodeListnon è una matrice reale (ad esempio esso non contiene .forEach, .slice, .push, ecc ...).

Così, se lo ha fatto convertire HTMLScriptElement[]nel sistema tipo, si otterrebbe nessun errore di tipo se si è tentato di chiamare Array.prototypei membri su di esso al momento della compilazione, ma sarebbe fallire in fase di esecuzione.

Non digitare cast. Mai. Utilizzare tipo guardie:

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.

Lasciate che il compilatore fare il lavoro per voi e ottenere gli errori quando le tue supposizioni si rivelano sbagliate.

Può sembrare eccessivo, in questo caso, ma vi aiuterà molto se si torna tardi e cambiare il selettore, come l'aggiunta di una classe che manca nel DOM, per esempio.

Questo sembra risolvere il problema, utilizzando il [index: TYPE]tipo di accesso matrice, salute.

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

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

Esempio Aggiornato:

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

Documentazione:

Dattiloscritto - tipi di base - Tipo asserzioni

Potrebbe essere risolto nel file di dichiarazione (lib.d.ts) se dattiloscritto definirebbe HTMLCollection invece di NodeList come un tipo di ritorno.

DOM4 specifica anche questo come il tipo di ritorno corretto, ma le specifiche DOM più anziani sono meno chiare.

Vedi anche http://typescript.codeplex.com/workitem/252

Suggerirei anche le guide SitePen

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (vedi sotto) e https://www.sitepen.com/blog/2014/08/22/advanced -typescript-Concepts-classi-types /

Dattiloscritto permette inoltre di specificare i diversi tipi di ritorno quando una stringa esatta viene fornito come argomento a una funzione. Ad esempio, la dichiarazione ambientale di tipografico per il metodo createElement del DOM è simile al seguente:

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

Questo significa che, a macchina, quando si chiama ad esempio document.createElement ( 'video'), dattiloscritto conosce il valore di ritorno è un HTMLVideoElement e sarà in grado di assicurare si interagisce correttamente con le API DOM video senza la necessità di digitare assert.

Dal momento che è una NodeList, non una Array, non si dovrebbe essere molto usare staffe o la fusione a Array. Il modo proprietà per ottenere il primo nodo è:

document.getElementsByName(id).item(0)

Si può solo lanciare quella:

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

Oppure, si estendono 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];