TypeScript: casting HTMLElement

Qualcuno sa come trasmettere in TypeScript?

Sto provando a fare questo:

var script:HTMLScriptElement = document.getElementsByName("script")[0];
alert(script.type);

ma mi sta dando un errore:

Cannot convert 'Node' to 'HTMLScriptElement': Type 'Node' is missing property 'defer' from type 'HTMLScriptElement'
(elementName: string) => NodeList

Non riesco ad accedere al membro 'type' dell'elemento script a meno che non lo esegua nel tipo corretto, ma non so come farlo. Ho cercato i documenti e gli esempi, ma non sono riuscito a trovare nulla.

TypeScript usa '<>' per circondare i cast, quindi quanto sopra diventa:

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

Tuttavia, sfortunatamente non puoi fare:

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

Ottieni l'errore

Cannot convert 'NodeList' to 'HTMLScriptElement[]'

Ma puoi fare:

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

A partire da TypeScript 0.9 il lib.d.tsfile utilizza firme di sovraccarico specializzate che restituiscono i tipi corretti per le chiamate getElementsByTagName.

Ciò significa che non è più necessario utilizzare le asserzioni di tipo per modificare il tipo:

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

Puoi sempre hackerare il sistema di tipi usando:

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

Non digitare cast. Mai. Usa protezioni di tipo:

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.

Lascia che il compilatore faccia il lavoro per te e ottenga errori quando i tuoi presupposti risultano errati.

In questo caso potrebbe sembrare eccessivo, ma ti aiuterà molto se torni più tardi e cambi il selettore, ad esempio aggiungendo una classe mancante nel dom.

Per finire con:

• un Arrayoggetto reale (non un NodeListvestito come un Array)
• un elenco che è garantito per includere solo HTMLElements, non Nodeè forzato a HTMLElements
• una calda sensazione confusa 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.

Potremmo digitare la nostra variabile con un tipo di ritorno esplicito :

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

O asserire come (necessario con TSX ):

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

O in casi più semplici affermare con la sintassi della parentesi angolare .

Un'asserzione di tipo è come un cast di tipo in altre lingue, ma non esegue controlli o ristrutturazioni speciali dei dati. Non ha alcun impatto sul runtime ed è utilizzato esclusivamente dal compilatore.

Documentazione:

TypeScript - Tipi di base - Asserzioni di tipo

Giusto per chiarire, questo è corretto.

Impossibile convertire "Elenco nodi" in "HTMLScriptElement []"

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

Pertanto, se si convertisse HTMLScriptElement[]nel sistema di tipi, non si otterrebbero errori di tipo se si provasse a chiamare Array.prototypemembri su di esso in fase di compilazione, ma fallirebbe in fase di esecuzione.

Questo sembra risolvere il problema, usando il [index: TYPE]tipo di accesso alla matrice, evviva.

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

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

Potrebbe essere risolto nel file di dichiarazione (lib.d.ts) se TypeScript definisse HTMLCollection invece di NodeList come tipo restituito.

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

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

Dal momento che è un NodeList, non un Array, non dovresti davvero usare parentesi o casting Array. Il modo proprietà per ottenere il primo nodo è:

document.getElementsByName(id).item(0)

Puoi semplicemente lanciarlo:

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

Oppure estendi NodeList:

interface HTMLScriptElementNodeList extends NodeList
{
    item(index: number): HTMLScriptElement;
}
var scripts = <HTMLScriptElementNodeList> document.getElementsByName('script'),
    script = scripts.item(0);

Consiglierei anche le guide del sito

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

TypeScript consente inoltre di specificare diversi tipi di ritorno quando viene fornita una stringa esatta come argomento di una funzione. Ad esempio, la dichiarazione ambientale di TypeScript per il metodo createElement del DOM è simile alla seguente:

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

Ciò significa, in TypeScript, quando si chiama ad esempio document.createElement ('video'), TypeScript sa che il valore restituito è un HTMLVideoElement e sarà in grado di assicurarsi di interagire correttamente con l'API video DOM senza che sia necessario digitare assert.

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