Letra de imprenta: fundición HTMLElement

A partir del texto mecanografiado 0.9 del lib.d.tsarchivo utiliza firmas especializadas de sobrecarga que devuelven los tipos correctos para llamadas a getElementsByTagName.

Esto significa que ya no es necesario utilizar las afirmaciones de tipo para cambiar el tipo:

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

Siempre se puede piratear sistema de tipos usando:

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

Para terminar con:

• un real Arrayobjeto (no un NodeListvestido de un Array)
• una lista que está garantizado para incluir solamente HTMLElements, no Nodes-fuerza fundido a HTMLElements
• un sentimiento cálido a hacer lo correcto

Prueba esto:

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

Disfrutar.

Solo para aclarar, esto es correcto.

No se puede convertir 'NodeList' a 'HTMLScriptElement []'

como NodeListno es una matriz real (por ejemplo, no contiene .forEach, .slice, .push, etc ...).

Por lo tanto si se convertía al HTMLScriptElement[]en el sistema de tipos, se obtendría ningún error de tipo si se trató de llamar a Array.prototypelos miembros sobre el mismo en tiempo de compilación, pero sería un error en tiempo de ejecución.

No escriba fundido. Nunca. Use protectores de tipo:

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.

Deje que el compilador haga el trabajo por usted y obtener errores cuando sus suposiciones resultan mal.

Puede parecer una exageración en este caso, sino que le ayudará mucho si usted se vuelve más tarde y cambiar el selector, como la adición de una clase que falta en el DOM, por ejemplo.

Esto parece resolver el problema, utilizando el [index: TYPE]tipo de acceso a conjunto, aplausos.

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

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

ejemplo actualización:

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

Documentación:

Letra de imprenta - Tipos básicos - Tipo afirmaciones

Podrían ser resueltos en el expediente de declaración (lib.d.ts) si mecanografiado definiría HTMLCollection en lugar de NodeList como un tipo de retorno.

DOM4 también especifica esto como el tipo de retorno correcta, pero las especificaciones DOM mayores son menos claras.

Ver también http://typescript.codeplex.com/workitem/252

También recomendaría las guías SitePen

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (ver abajo) y https://www.sitepen.com/blog/2014/08/22/advanced -typescript-conceptos-clases-types /

Transcripción también le permite especificar diferentes tipos de retorno cuando una cadena exacta se proporciona como un argumento a una función. Por ejemplo, la declaración ambiental de mecanografiado para el método createElement del DOM es el siguiente:

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

Esto significa, por escrito, cuando se llama por ejemplo document.createElement ( 'video'), mecanografiado conoce el valor de retorno es un HTMLVideoElement y será capaz de asegurar que está interactuando correctamente con la API DOM de vídeo sin necesidad de escribir afirman.

Ya que es una NodeList, no una Array, no debe ser realmente el uso de soportes o fundición a Array. La forma en propiedad para obtener el primer nodo es:

document.getElementsByName(id).item(0)

Usted sólo puede emitir ese:

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

O, se extienden 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];