Typescript: döküm HTMLElement

Typescript 0.9 itibariyle lib.d.tsdosya aramaları için doğru türde dönmek uzman aşırı yük imzalarını kullanır getElementsByTagName.

Bu, artık türünü değiştirmek için tip iddialarını kullanmak gerektiği anlamına gelir:

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

Hep kullanarak tipi sistemini kesmek olabilir:

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

ile bitirmek için:

• gerçek bir Arraynesne (a olmayan NodeListbir giyinmiş Array)
• dahil ancak garanti edecek bir liste HTMLElementsdeğildir, Nodes kuvvet döküm HTMLElements
• Doğruyu yapmak için sıcak tatmin duygusu

Bunu dene:

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

Keyfini çıkarın.

Sadece bu doğruysa, netleştirmek için.

için 'nodelist' dönüştürülemez 'HTMLScriptElement []'

Bir şekilde NodeListgerçek bir dizi değil (örneğin o içermez .forEach, .slice, .push..., vs).

O dönüştürmek did Böylece eğer HTMLScriptElement[]tip sistemde, sen aramaya çalıştı eğer hiçbir türü hatası ediyorum Array.prototypederleme sırasında üzerinde üye, ancak çalışma zamanında başarısız olur.

döküm yazmayın. Asla. tip korumaları kullanın:

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.

derleyici sizin için çalışsın ve varsayımlar yanlış çıkması hatalara dönelim.

Bu durumda overkill görünebilir, ancak örneğin, dom eksik bir sınıf eklemek gibi seçici daha sonra geri geliyorsa size çok yardımcı ve değişecektir.

Bu kullanarak, sorunu çözmek gibi görünüyor [index: TYPE], şerefe dizisi erişim türü.

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

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

Güncel örnek:

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

Belgeler:

Typescript - Temel Türleri - Tip iddialar

Typescript bir dönüş türü olarak yerine nodelist ait HTMLCollection tanımlamak olsaydı beyan dosyası (lib.d.ts) içinde çözülebilir.

DOM4 da doğru dönüş türü olarak bu belirtir, ancak eski DOM özellikleri kadar net değil.

Ayrıca bkz http://typescript.codeplex.com/workitem/252

Ayrıca sitepen kılavuzları öneriyoruz

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/ (aşağıya bakınız) ve https://www.sitepen.com/blog/2014/08/22/advanced -typescript-kavramlar sınıfları-türleri /

Typescript da kesin dize bir işleve argüman olarak sağlandığında farklı dönüş türlerini belirlemenizi sağlar. Örneğin, DOM createElement yöntemi için typescript en çevre beyanı şuna benzer:

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

Bu örneğin document.createElement ( 'video'), typescript dönüş değeri bir HTMLVideoElement olduğunu bilir arayıp assert yazmanız gerek kalmadan DOM video API ile düzgün etkileşim sağlamak mümkün olacak zaman, daktilo, anlamına gelmektedir.

Bu bir olduğu için NodeListdeğil, bir Array, gerçekten parantez kullanılarak veya döküm olmamalıdır Array. İlk düğümü almak için özellik yoludur:

document.getElementsByName(id).item(0)

Bunu sadece yayınlayabileceğim:

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

Veya, genişletmek 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];