Typoskript: Gießen Htmlelement

Ab Typoskript 0.9 die lib.d.tsDatei nutzt spezielle Überlastung Signaturen , die die richtigen Typen für Anrufe zurückzukehren getElementsByTagName.

Dies bedeutet, dass Sie nicht mehr Typ Behauptungen verwenden müssen, um den Typ zu ändern:

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

Sie können jederzeit Typ-System hacken mit:

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

Um am Ende mit:

• ein tatsächliches ArrayObjekt (nicht NodeListals verkleidet Array)
• eine Liste, die nur dann gewährleistet ist , sind HTMLElements, nicht Nodes Kraft gegossen HTMLElements
• ein wohlig warmes Gefühl, das Richtige zu tun

Versuche dies:

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

Genießen.

Nur um zu klären, dies richtig ist.

Kann nicht konvertieren ‚NodeList‘ auf ‚HTMLScriptElement []‘

als NodeListnicht eine tatsächliche Array ist (zB es nicht enthält .forEach, .slice, .push, etc ...).

Also wenn es tut umwandeln HTMLScriptElement[]in dem Typsystem, dann würden Sie keine Art Fehler, wenn man versucht anzurufen Array.prototypeMitglieder ihm bei der Kompilierung, aber es würde zur Laufzeit fehlschlagen.

Geben Sie keine Guss. Noch nie. Verwenden Art Wächter:

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.

Lassen Sie den Compiler die Arbeit für Sie tun und Fehler erhalten, wenn Ihre Annahmen falsch herausstellen.

Es kann in diesem Fall aussehen treibt, aber es wird Ihnen helfen, eine Menge, wenn Sie später zurückkommen und die Wählern ändern, wie eine Klasse hinzufügen, die in dem dom, beispielsweise fehlen.

Dies scheint das Problem zu lösen, die mit [index: TYPE]Array - Zugriffstyp, cheers.

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

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

Aktualisiert Beispiel:

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

Dokumentation:

Typoskript - Grundtypen - Typ Behauptungen

Könnte in der Deklarationsdatei (lib.d.ts) gelöst werden, wenn Typoskript HTMLCollection statt NodeList als Rückgabetyp definieren würde.

DOM4 gibt dies auch als den richtigen Rückgabetyp, aber ältere DOM-Spezifikationen sind weniger klar.

Siehe auch http://typescript.codeplex.com/workitem/252

Ich würde auch die sitepen Führer empfehlen

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (siehe unten) und https://www.sitepen.com/blog/2014/08/22/advanced -typescript-Konzepte-Klassen-Typen /

Typoskript können Sie auch verschiedene Rückgabetypen angeben, wenn eine exakte Zeichenfolge als Argument an eine Funktion vorgesehen ist. Zum Beispiel sieht Typoskript der Umgebungs Erklärung für die Methode create DOM wie folgt aus:

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

Das heißt, in Typoskript, wenn Sie anrufen zB document.createElement ( ‚Video‘), Typoskript der Rückgabewert kennt ein HTMLVideoElement und wird Sie richtig sind, um sicherzustellen, der Lage sein, mit dem DOM Video-API, ohne dass assert eingeben interagieren.

Da es eine ist NodeList, nicht Array, sollten Sie nicht wirklich Klammern verwenden oder Gießen Array. Die Eigenschaft Art und Weise den ersten Knoten zu erhalten ist:

document.getElementsByName(id).item(0)

Sie können, dass nur Stimmen:

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

Oder verlängern 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];