TypeScript: döküm HTMLElement

TypeScript'te nasıl yayın yapılacağını bilen var mı?

Bunu yapmaya çalışıyorum:

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

ama bana bir hata veriyor:

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

Ben doğru türe döküm sürece script öğesinin 'type' üyesi erişemiyorum, ama bunu nasıl yapacağımı bilmiyorum. Dokümanları ve örnekleri aradım, ancak hiçbir şey bulamadım.

TypeScript, çevrimleri çevrelemek için '<>' kullanır, böylece aşağıdakiler olur:

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

Ancak, ne yazık ki yapamazsınız:

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

Hatayı alıyorsun

Cannot convert 'NodeList' to 'HTMLScriptElement[]'

Ancak şunları yapabilirsiniz:

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

TypeScript 0.9'dan itibaren lib.d.tsdosya, çağrılar için doğru türleri döndüren özel aşırı yük imzaları kullanır getElementsByTagName.

Bu, türü değiştirmek için artık tür önerilerini kullanmanız gerekmediği anlamına gelir:

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

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.

Bırakın, derleyicinin işi sizin için yapmasına izin verin ve varsayımlarınız yanlış olduğunda hatalar alın.

Bu durumda aşırıya kaçabilir gibi görünebilir, ancak daha sonra geri dönüp seçiciyi değiştirirseniz, örneğin dom'da eksik bir sınıf eklemek gibi, size çok yardımcı olacaktır.

Her zaman aşağıdakileri kullanarak tip sistemini hackleyebilirsiniz:

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

Son olarak:

• gerçek bir Arraynesne ( NodeListgiyinmiş değil gibi Array)
• dahil ancak garanti edecek bir liste HTMLElementsdeğildir, Nodes kuvvet döküm HTMLElements
• doğru şey yapmak için sıcak bir bulanık duygu

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

Zevk almak.

Değişkenimizi açık bir dönüş türüyle yazabiliriz :

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

Ya assert olarak (ile gerekli TSX ):

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

Veya daha basit durumlarda, köşeli parantez sözdizimi ile onaylayın.

Bir tür iddiası diğer dillerde dökülen bir tür gibidir, ancak verilerin özel bir kontrolünü veya yeniden yapılandırılmasını gerçekleştirmez. Çalışma zamanı etkisi yoktur ve yalnızca derleyici tarafından kullanılır.

Belgeler:

TypeScript - Temel Türler - Tür iddiaları

Sadece açıklığa kavuşturmak için, bu doğrudur.

'NodeList', 'HTMLScriptElement []' biçimine dönüştürülemiyor

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

Böylece HTMLScriptElement[]tür sistemine dönüştürdüyse Array.prototype, derleme zamanında üyelerini çağırmayı denerseniz tür hataları almazsınız , ancak çalışma zamanında başarısız olur.

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

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

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

TypeScript, dönüş türü olarak NodeList yerine HTMLCollection tanımlayacaksa bildirim dosyasında (lib.d.ts) çözülebilir.

DOM4 de bunu doğru dönüş türü olarak belirtir, ancak eski DOM spesifikasyonları daha az nettir.

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

Bir NodeListdeğil, çünkü Array, gerçekten parantez veya döküm kullanmamalısınız Array. İlk düğümü almanın özellik yolu:

document.getElementsByName(id).item(0)

Sadece bunu yapabilirsiniz:

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

Veya, uzatın NodeList:

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

Ayrıca sitepen kılavuzlarını tavsiye ederim

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

TypeScript ayrıca bir işleve bağımsız değişken olarak tam bir dize sağlandığında farklı dönüş türleri belirtmenize olanak tanır. Örneğin, TypeScript'in DOM'un createElement yöntemi için ortam bildirimi şöyle görünür:

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

Bu, TypeScript'te, örneğin document.createElement ('video') öğesini çağırdığınızda, TypeScript, dönüş değerinin bir HTMLVideoElement olduğunu bilir ve herhangi bir onay yazmaya gerek kalmadan DOM Video API ile doğru bir şekilde etkileşimde bulunabilmenizi sağlar.

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