Loggfila: avstøpning HTMLElement

Per Loggfila 0,9 til lib.d.tsfilen bruker spesialiserte overbelastning signaturer som returnerer de riktige typene for samtaler til getElementsByTagName.

Dette betyr at du ikke lenger trenger å bruke typen påstander for å endre type:

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

Du kan alltid hacke type system ved hjelp av:

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

Å ende opp med:

• en aktuell Arraygjenstand (ikke en NodeListkledd opp som en Array)
• en liste som er garantert å bare inkludere HTMLElements, ikke Nodes kraft-støpt til HTMLElements
• en varm god følelse å gjøre det rette

Prøv dette:

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

Nyt.

Ikke skriv cast. Aldri. Bruk typen vakter:

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.

La kompilatoren gjøre jobben for deg og få feil når forutsetningene slår ut feil.

Det kan se overkill i dette tilfellet, men det vil hjelpe deg mye hvis du kommer tilbake senere og endre velgeren, som å legge en klasse som mangler i dom, for eksempel.

Bare for å avklare, dette er riktig.

Kan ikke konvertere 'NodeList' til 'HTMLScriptElement []

som NodeLister ikke en faktisk matrise (for eksempel den ikke inneholder .forEach, .slice, .push, etc ...).

Således hvis det gjorde konvertere til HTMLScriptElement[]i den type system, vil du få noen typen feil hvis du prøvde å ringe Array.prototypemedlemmer på det ved kompilering, men det ville svikte under kjøring.

Dette ser ut til å løse problemet ved hjelp av [index: TYPE]matrisen tilgangstype, jubel.

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

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

Oppdatert eksempel:

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

dokumentasjon:

Loggfila - Grunnleggende typer - Type påstander

Kan løses i erklæringen fil (lib.d.ts) hvis maskinskrevet manuskript ville definere HTMLCollection istedenfor NodeList som en returtype.

DOM4 spesifiserer også dette som den riktige returtype, men eldre DOM spesifikasjonene er mindre klar.

Se også http://typescript.codeplex.com/workitem/252

Jeg vil også anbefale sitepen guider

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (se nedenfor) og https://www.sitepen.com/blog/2014/08/22/advanced -typescript-konsepter-klasser-typer /

Loggfila lar deg også angi forskjellige returtyper når en eksakt strengen er gitt som et argument til en funksjon. For eksempel, Loggfila er ambient erklæring for DOM er createElement metoden ser slik ut:

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

Dette betyr i maskinskrevet manuskript, når du ringer f.eks document.createElement ( 'video'), Loggfila vet returverdien er en HTMLVideoElement og vil være i stand til å sikre at du er i samspill riktig med DOM Video API uten behov for å skrive hevde.

Siden det er en NodeList, ikke en Array, bør du egentlig ikke skal bruke parentes eller støping til Array. Eiendommen måten å få den første noden er:

document.getElementsByName(id).item(0)

Du kan bare kaste det:

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

Eller, forlenge 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];