TypeScript 拡張ウィンドウ

1. TypeScript window オブジェクト
2. TypeScript の window オブジェクトで新しいプロパティを宣言する
3. TypeScript でのインターフェイス宣言のマージ

この記事では、TypeScript の window を拡張する方法を説明します。

TypeScript window オブジェクト

window は、ブラウザで定義された組み込みオブジェクトです。これは、DOM ドキュメントを含む window オブジェクトです。

ブラウザの window オブジェクトに関連付けられているプロパティと関数にアクセスする必要がある場合があります。組み込みの window オブジェクトは、すぐに使用できる多くの便利なプロパティと関数を備えています。

頻繁に使用される window オブジェクトのプロパティと関数の一部を以下に示します。

1. プロパティ：EventTarget、document、console、event、localStorage、onLoad など。
2. メソッド：addEventListener、fetch、alert、atob、btoa、open、prompt、print など。

通常、TypeScript はさまざまなモジュールでそのタイプを定義します。したがって、window タイプは lib.dom モジュールで定義されます。

一部のシナリオでは、組み込みのメソッドとプロパティでは不十分です。TypeScript プロジェクトで Google Analytics または Tag Manager ライブラリを使用する場合は常に、これらのスクリプトがコードによって読み込まれない可能性があります。

したがって、window オブジェクトのプロパティとメソッドを介してこれらのサードパーティツールと通信する方法が必要です。

TypeScript の window オブジェクトで新しいプロパティを宣言する

JavaScript では、組み込みの window オブジェクトで新しいプロパティまたはメソッドを宣言するのは非常に簡単です。次の方法を使用して、JavaScript を使用して window オブジェクトに新しいプロパティを定義できます。

window.myProp = 'newly declared property';
window['myProp'] = 'newly declared property';

ブラウザコンソールで window オブジェクトを調べてみましょう。

console.log(window);

出力：

TypeScript では、上記のアプローチは機能しません。JavaScript のように window オブジェクトで新しいプロパティを宣言しようとすると、次のように TypeScript がエラーをスローします。

window.anotherNewProp = 'this is a property on window object in typescript';

出力：

通常、TypeScript オブジェクトタイプはクラスまたはインターフェイスに基づいています。次のように、Animal というクラスがあるとします。

class Animal {
    name: string;
    color: string;
}

Animal オブジェクトを作成し、name プロパティと color プロパティにいくつかの値を割り当てましょう。

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';

上記のコードは問題なくコンパイルされます。

次に、同じ Animal オブジェクトで新しいプロパティ numberOfLegs を宣言し、値を割り当てようとします。

class Animal {
    name: string;
    color: string;
}

let newAnimal = new Animal();

newAnimal.name = 'lion';
newAnimal.color = 'grey';
newAnimal.numberOfLegs = 4;

エラーが発生します。TypeScript でそのような新しいオブジェクトプロパティを宣言することはできません。

これを解決するには、最初に numberOfLegs プロパティを Animal クラスに追加する必要があります。

これは、組み込みの window オブジェクトでも同じ問題です。主な懸念事項は、TypeScript window オブジェクトが自分で作成されていないことです。

ブラウザが付属しています。したがって、この組み込みオブジェクトにプロパティを追加する適切な方法が必要です。

TypeScript でのインターフェイス宣言のマージ

TypeScript は、すぐに使用できる宣言マージ手法をサポートしています。最も単純なタイプの宣言のマージは、インターフェイスのマージです。

複数のインターフェースが同じ名前で宣言されるときはいつでも、TypeScript はすべてのインターフェース宣言を 1つにマージします。

組み込みの window オブジェクトは、TypeScript の window インターフェースに基づいています。したがって、TypeScript インターフェイスのマージ手法を使用して、組み込みのインターフェイスに新しいプロパティを追加できます。

window という名前の新しいインターフェースを作成しましょう。

interface Window {
    myProp: string;
}

次に、window オブジェクトの myProp プロパティにアクセスしてみます。

interface Window {
    myProp: string;
}

window.myProp = 'typescript window object property';

出力：

今回、TypeScript コンパイラによって発生する問題はありません。タイプを検討する場合は、window オブジェクトで新しいプロパティまたはメソッドを定義することをお勧めします。

型に関係がない場合は、次の構文を使用して、window オブジェクトの新しいプロパティを宣言できます。

(<any>.window).myProp = 'typescript property on window object';

関数を宣言することもできます。

(<any>.window).NewFunction = () => {
    console.log('new function on window object');
}

TypeScript で両方の手法を使用して、window オブジェクトに新しいプロパティまたはメソッドを追加できます。選択はコンテキストに基づいてあなた次第です。