TypeScript: casting HTMLElement

Czy ktoś wie, jak przesyłać w TypeScript?

Próbuję to zrobić:

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

ale daje mi błąd:

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

Nie mogę uzyskać dostępu do elementu „type” elementu skryptu, chyba że przerzucę go na poprawny typ, ale nie wiem, jak to zrobić. Przeszukałem dokumenty i próbki, ale nic nie znalazłem.

TypeScript używa „<>” do otaczania rzutów, więc powyższe staje się:

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

Niestety nie możesz zrobić:

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

Wystąpił błąd

Cannot convert 'NodeList' to 'HTMLScriptElement[]'

Ale możesz zrobić:

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

Począwszy od TypeScript 0.9, lib.d.tsplik używa specjalistycznych sygnatur przeciążenia, które zwracają prawidłowe typy wywołań getElementsByTagName.

Oznacza to, że nie trzeba już używać asercji typu, aby zmienić typ:

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

Zawsze możesz zhakować system typu, używając:

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

Nie wpisuj obsady. Nigdy. Użyj osłon 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.

Pozwól kompilatorowi wykonać pracę za Ciebie i popełniaj błędy, gdy Twoje założenia okażą się błędne.

W tym przypadku może to wyglądać na przesadne, ale bardzo ci pomoże, jeśli wrócisz później i zmienisz selektor, na przykład dodając klasę, której brakuje w domenie.

Aby skończyć z:

• rzeczywisty Arrayprzedmiot (nie NodeListprzebrany za Array)
• lista, która na pewno obejmuje tylko HTMLElements, Nodea nie s-casted do HTMLElements
• ciepłe, niewyraźne uczucie, by zrobić Właściwą Rzecz

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ę.

Możemy wpisać naszą zmienną z jawnym typem zwrotu :

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

Lub potwierdź jako (potrzebne w TSX ):

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

Lub w prostszych przypadkach stwierdzaj ze składnią nawiasu kątowego .

Asercja typu jest jak rzutowany w innych językach, ale nie przeprowadza specjalnego sprawdzania ani restrukturyzacji danych. Nie ma wpływu na środowisko uruchomieniowe i jest używany wyłącznie przez kompilator.

Dokumentacja:

TypeScript - Typy podstawowe - Asercje typu

Tylko dla wyjaśnienia, to jest poprawne.

Nie można przekonwertować „NodeList” na „HTMLScriptElement []”

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

Tak więc, jeśli przekonwertowano go HTMLScriptElement[]na system typów, nie wystąpiłyby żadne błędy typu, gdybyś próbował wywołać Array.prototypena nim członków w czasie kompilacji, ale to się nie powiedzie w czasie wykonywania.

To wydaje się rozwiązać problem, używając [index: TYPE]typu dostępu do tablicy, na zdrowie.

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

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

Można rozwiązać w pliku deklaracji (lib.d.ts), jeśli TypeScript zdefiniuje HTMLCollection zamiast NodeList jako typ zwracany.

DOM4 określa również to jako poprawny typ zwrotu, ale starsze specyfikacje DOM są mniej jasne.

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

Ponieważ jest to, a NodeListnie Array, tak naprawdę nie powinieneś używać nawiasów ani rzutować Array. Właściwym sposobem na uzyskanie pierwszego węzła jest:

document.getElementsByName(id).item(0)

Możesz po prostu rzucić:

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

Lub przedłuż NodeList:

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

Poleciłbym również przewodniki po sitepen

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-concept-class-types /

TypeScript pozwala również określić różne typy zwracanych znaków, gdy dokładny ciąg znaków jest podany jako argument funkcji. Na przykład deklaracja otoczenia TypeScript dla metody createElement DOM wygląda następująco:

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 TypeScript podczas wywoływania np. Document.createElement („wideo”), TypeScript wie, że zwracaną wartością jest HTMLVideoElement i będzie w stanie zapewnić, że poprawnie współpracujesz z DOM Video API bez potrzeby wpisywania aser.

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