TypeScript: Casting von HTMLElement

Weiß jemand, wie man TypeScript umsetzt?

Ich versuche das zu tun:

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

aber es gibt mir einen Fehler:

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

Ich kann nicht auf das 'type'-Mitglied des Skriptelements zugreifen, es sei denn, ich habe es in den richtigen Typ umgewandelt, aber ich weiß nicht, wie das geht. Ich habe die Dokumente und Beispiele durchsucht, aber nichts gefunden.

TypeScript verwendet '<>', um Casts zu umgeben.

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

Leider können Sie nicht:

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

Sie erhalten den Fehler

Cannot convert 'NodeList' to 'HTMLScriptElement[]'

Aber Sie können tun:

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

Ab TypeScript 0.9 verwendet die lib.d.tsDatei spezielle Überladungssignaturen, die die richtigen Typen für Aufrufe an zurückgeben getElementsByTagName.

Dies bedeutet, dass Sie keine Typzusicherungen mehr 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 das Typsystem immer hacken, indem Sie:

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

Geben Sie keine Besetzung ein. Noch nie. Verwenden Sie Typschutz:

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 erledigen und erhalten Sie Fehler, wenn sich Ihre Annahmen als falsch herausstellen.

In diesem Fall sieht es vielleicht übertrieben aus, aber es hilft Ihnen sehr, wenn Sie später wiederkommen und den Selektor ändern, z. B. indem Sie eine Klasse hinzufügen, die im Dom fehlt.

Am Ende:

• ein tatsächliches ArrayObjekt (nicht als NodeListverkleidet Array)
• Eine Liste, die garantiert nur s enthält HTMLElementsund nicht Nodezwangsweise in HTMLElements umgewandelt wird
• ein warmes, verschwommenes 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.

Wir könnten unsere Variable mit einem expliziten Rückgabetyp eingeben :

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

Oder behaupten Sie als (benötigt mit TSX ):

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

Oder in einfacheren Fällen mit spitzer Klammer- Syntax behaupten .

Eine Typzusicherung ähnelt einer Typumwandlung in anderen Sprachen, führt jedoch keine spezielle Überprüfung oder Umstrukturierung von Daten durch. Es hat keine Auswirkungen auf die Laufzeit und wird ausschließlich vom Compiler verwendet.

Dokumentation:

TypeScript - Grundtypen - Typzusicherungen

Nur zur Klarstellung, das ist richtig.

'NodeList' kann nicht in 'HTMLScriptElement [] konvertiert werden'

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

Wenn es also HTMLScriptElement[]im Typsystem konvertiert würde, würden Sie keine Typfehler erhalten, wenn Sie versuchen würden, Array.prototypeMitglieder zur Kompilierungszeit darauf aufzurufen , aber es würde zur Laufzeit fehlschlagen.

Dies scheint das Problem zu lösen, indem der [index: TYPE]Array-Zugriffstyp verwendet wird.

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

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

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

DOM4 gibt dies auch als korrekten Rückgabetyp an, ältere DOM-Spezifikationen sind jedoch weniger klar.

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

Da es ein NodeList, kein ist Array, sollten Sie nicht wirklich Klammern oder Casting verwenden Array. Die Eigenschaftsmethode zum Abrufen des ersten Knotens lautet:

document.getElementsByName(id).item(0)

Sie können das einfach besetzen:

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

Oder verlängern Sie NodeList:

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

Ich würde auch die Sitepen-Anleitungen 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 /

Mit TypeScript können Sie auch verschiedene Rückgabetypen angeben, wenn eine genaue Zeichenfolge als Argument für eine Funktion angegeben wird. Die Umgebungsdeklaration von TypeScript für die createElement-Methode des DOM sieht beispielsweise folgendermaßen aus:

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

Wenn Sie in TypeScript z. B. document.createElement ('video') aufrufen, weiß TypeScript, dass der Rückgabewert ein HTMLVideoElement ist, und kann sicherstellen, dass Sie korrekt mit der DOM-Video-API interagieren, ohne assert eingeben zu müssen.

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