TypeScript：HTMLElementのキャスト

TypeScriptでキャストする方法を知っている人はいますか？

私はこれをやろうとしています：

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

しかし、それは私にエラーを与えています：

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

正しい型にキャストしない限り、script要素の 'type'メンバーにアクセスできませんが、これを行う方法がわかりません。ドキュメントとサンプルを検索しましたが、何も見つかりませんでした。

TypeScriptは '<>'を使用してキャストを囲むため、上記は次のようになります。

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

ただし、残念ながら次のことはできません。

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

エラーが発生します

Cannot convert 'NodeList' to 'HTMLScriptElement[]'

しかし、あなたはできる：

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

TypeScript 0.9以降、lib.d.tsファイルはへの呼び出しに対して正しい型を返す特別なオーバーロードシグネチャを使用しgetElementsByTagNameます。

つまり、型を変更するために型アサーションを使用する必要がなくなります。

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

あなたはいつもタイプシステムをハックすることができます：

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

キャストを入力しないでください。決して。タイプガードを使用する：

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.

コンパイラがあなたのために仕事をして、あなたの仮定が間違っていることが判明したときにエラーを受け取りましょう。

この場合はやり過ぎに見えるかもしれませんが、後で戻ってセレクターを変更すると、たとえばdomにないクラスを追加する場合などに役立ちます。

最終的に：

• 実際のArrayオブジェクト（NodeListとしてドレスアップされていないArray）
• へのフォースキャストHTMLElementsではなく、のみが含まれることが保証されているリストNodeHTMLElementの
• 正しいことをするための暖かいファジー感

これを試して：

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

楽しい。

明示的な戻り値の型で変数を入力できます。

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

または次のようにアサートします（TSXで必要）：

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

または、より単純なケースでは、角括弧構文でアサートします。

型アサーションは他の言語の型キャストに似ていますが、特別なチェックやデータの再構築は行いません。実行時への影響はなく、コンパイラーによってのみ使用されます。

ドキュメンテーション：

TypeScript-基本タイプ-タイプアサーション

明確にするために、これは正しいです。

「NodeList」を「HTMLScriptElement []」に変換できません

NodeList実際の配列ではありません（たとえば、それが含まれていない.forEach、.slice、.push...等、）。

したがってHTMLScriptElement[]、型システムで変換された場合Array.prototype、コンパイル時にメンバーを呼び出そうとしても型エラーは発生しませんが、実行時には失敗します。

これは問題を解決するようです、[index: TYPE]アレイアクセスタイプを使用して、乾杯。

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

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

TypeScriptが戻り値の型としてNodeListではなくHTMLCollectionを定義する場合、宣言ファイル（lib.d.ts）で解決できます。

DOM4もこれを正しい戻り値の型として指定していますが、古いDOM仕様はあまり明確ではありません。

http://typescript.codeplex.com/workitem/252も参照してください。

これはNodeListでなくなので、Arrayブラケットを使用したり、にキャストしたりしないでくださいArray。最初のノードを取得するプロパティの方法は次のとおりです。

document.getElementsByName(id).item(0)

あなたはそれをキャストすることができます：

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

または、拡張NodeList：

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

私もサイトペンガイドをお勧めします

https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/（下記参照）および https://www.sitepen.com/blog/2014/08/22/advanced -typescript-concepts-classes-types /

TypeScriptでは、正確な文字列が関数の引数として提供されている場合に、さまざまな戻り値の型を指定することもできます。たとえば、DOMのcreateElementメソッドに対するTypeScriptのアンビエント宣言は次のようになります。

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

つまり、TypeScriptでは、たとえばdocument.createElement（ 'video'）を呼び出すと、TypeScriptは戻り値がHTMLVideoElementであることを認識し、アサートを入力する必要なくDOM Video APIと正しく対話していることを確認できます。

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