Maszynopis: odlewanie HTMLElement

Jak maszynopisu 0,9 lib.d.tsplik używa specjalistycznych podpisów przeciążenia, które zwracają poprawnych typów dla wywołań getElementsByTagName.

Oznacza to, że nie trzeba już używać typu twierdzeń zmienić typ:

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

Zawsze można włamać system typu przy użyciu:

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

Aby skończyć z:

• rzeczywisty Arrayobiekt (nie NodeListklejony jako Array)
• lista, która jest zagwarantowana tylko to HTMLElements, nie Nodes-force lanego do HTMLElements
• ciepły rozmyte uczucie zrobić dobry uczynek

Spróbuj tego:

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

Cieszyć się.

Właśnie w celu wyjaśnienia, jest to prawidłowe.

nie można przekonwertować „NodeList” do „HTMLScriptElement []”

jak NodeListnie jest rzeczywiste array (np nie zawiera .forEach, .slice, .push, etc ...).

Zatem jeśli nawet przekształcić się HTMLScriptElement[]w systemie typu, można uzyskać żadnych błędów typu gdybyś spróbował zadzwonić Array.prototypeczłonków na nim w czasie kompilacji, ale to nie w czasie wykonywania.

Nie wpisuj obsady. Nigdy. Użyj strażników typu:

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.

Niech kompilator wykonać pracę dla Ciebie i pojawiają się błędy, gdy założenia okazują się błędne.

To może wyglądać przesada w tym przypadku, ale będzie Ci dużo jeśli wrócisz później i zmienić przełącznik, jak dodać klasę, której brakuje w dom, na przykład.

To wydaje się rozwiązać problem, stosując [index: TYPE]typ dostępu do tablicy, wiwaty.

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

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

Zaktualizowany przykład:

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

Dokumentacja:

Maszynopis - podstawowe typy - typ twierdzenia

Może być rozwiązany w pliku deklaracji (lib.d.ts) jeżeli maszynopis byłoby określić HTMLCollection zamiast liście węzłów jako typ zwracany.

DOM4 również określa to jako prawidłowy typ zwracany, ale starsze specyfikacji DOM są mniej jasne.

Zobacz także http://typescript.codeplex.com/workitem/252

Chciałbym również polecić sitepen prowadnice

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (patrz poniżej) i https://www.sitepen.com/blog/2014/08/22/advanced -typescript-Concepts klasy-typy /

Maszynopis pozwala także na określenie różnych typów zwracanych kiedy dokładny ciąg jest jako argument do funkcji. Na przykład deklaracja otoczenia maszynopis dla metody createElement DOM wygląda tak:

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

Oznacza to, że w maszynie, gdy dzwonisz np document.createElement ( „wideo”), maszynopis zna wartość zwracana jest HTMLVideoElement i będzie w stanie zapewnić prawidłowej jesteś interakcji z API DOM wideo bez potrzeby wpisywania assert.

Ponieważ jest to NodeList, a nie Array, to nie powinno być naprawdę za pomocą wsporników lub do rzucania Array. Nieruchomość sposób uzyskać pierwszy węzeł jest:

document.getElementsByName(id).item(0)

można po prostu rzucać, że:

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

Lub przedłużyć 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];