Strojopisem: lití HTML prvek

Jak strojopisem 0.9 lib.d.tssoubor používá specializované podpisy přetížení, které vracejí správné druhy pro volání getElementsByTagName.

To znamená, že již není nutné použít typ tvrzení změnit typ:

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

Vždycky může zaseknout typu systému pomocí:

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

Skončit s:

• aktuální Arrayobjekt (není NodeListoblečený jako Array)
• seznam, který je zaručeno, že budou obsahovat pouze HTMLElements, ne Nodes nuceně nanesena do HTMLElementsekund
• teplý nejasný pocit, udělat správnou věc

Zkuste to:

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

Užívat si.

Jen pro upřesnění, je to správné.

Nelze převést 'NodeList' to 'HTMLScriptElement []

jako NodeListnení skutečný array (např neobsahuje .forEach, .slice, .pushatd ...).

Tak kdyby tomu tak bylo převést HTMLScriptElement[]do systému typu, měli byste mít žádné chyby typu, pokud jste se pokusili volat Array.prototypečleny na něm v době kompilace, ale to by selhat v době běhu.

Nezadávejte obsazení. Nikdy. Použijte, kryty:

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.

Nechat kompilátor dělat práci za vás a získat chyby při své předpoklady dopadne špatně.

To může vypadat přezbrojení v tomto případě, ale to vám pomůže hodně, když se později vrátit a změnit voliče, jako je přidání třídu, která chybí v dom, například.

Zdá se, že problém vyřešit, pomocí [index: TYPE]typ přístupu pole, jásot.

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

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

Aktualizováno příklad:

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

Dokumentace:

Strojopis - Základní typy - Typ tvrzení

By mohl být vyřešen v souboru prohlášení (lib.d.ts), pokud by strojopis definovat HTMLCollection namísto NodeList jako návratový typ.

DOM4 také specifikuje to jako správný typ vratné, ale starší specifikace DOM jsou méně jasné.

Viz také http://typescript.codeplex.com/workitem/252

Také bych doporučit sitepen vodítka

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (viz níže) a https://www.sitepen.com/blog/2014/08/22/advanced -typescript-pojmy-třídy-typy /

Strojopisem také umožňuje zadat různé typy návratové když je přesný řetězec poskytnuty jako argument funkce. Například okolní prohlášení strojopisem pro metodu createElement DOM vypadá takto:

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

To znamená, že na psacím stroji, když voláte např document.createElement ( ‚video‘), strojopisem ví, návratová hodnota je HTMLVideoElement a bude schopna zajistit si jsou vzájemně správně API DOM Video bez nutnosti zadávat assert.

Vzhledem k tomu, že je to NodeList, ne Array, neměli byste být opravdu pomocí konzol nebo lití Array. Vlastnost způsob, jak získat první uzel je:

document.getElementsByName(id).item(0)

Stačí si jen cast, že:

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

Nebo rozšířit 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];