TIL : TypeScriptでWindowにプロパティを追加する方法

2019/11/19(Tue) - 16:23

結論

  • Windowに対する型を定義すれば独自プロパティを追加できる

説明

JavaScriptの場合、下記は動作するが

x = "hoge";
console.log(x); // hoge

TypeScriptの場合は変数の宣言がされていないため動作しない

x = "hoge";         // error TS2304: Cannot find name 'x'.
console.log(x); // error TS2304: Cannot find name 'x'.

そこで利用するのが declareキーワード

declare const x: string;

x = "hoge";
console.log(x); // hoge 

declareとは

アンビエント宣言というもので、他のコンポーネント(ライブラリ、ブラウザ)で定義されている変数や関数に対して、型情報を定義してTypeScriptに知らせる機能。

※そのままの場合、TypeScriptは「そんなもの(変数 | 関数)の型は知らんぞ」となる

windowへの型定義の追加

declare globalを指定するとGlobalの名前空間にある定義を上書きする事ができるので、Windowに対して型定義を行って独自プロパティを追加する事が可能となる。

// 単純な例
declare global {
interface Window {
	hoge: string, // hogeプロパティ追加
	}
}

window.hoge = 'fuga'; // window.hogeに'fuga'を追加

console.log(window.hoge); // 'fuga'が返却される
// ファイルを分けた例

// HogeUtility.ts
export class HogeUtility {
	public setHoge(hoge: string): void {
        window.localStorage.setItem('hoge', hoge);
    }

	public getHoge(hoge: string): void {
        return window.localStorage.getItem('hoge');
    }
}

declare global {
interface Window {
	hogeUtility: HogeUtility	
	}
}

window.hogeUtility = new HogeUtility();
export default window;


// hoge.tsx
import window from './HogeUtility';

window.HogeUtility.setHoge('Fuga'); // "Fuga" をセット
window.HogeUtility.getHoge(); // "Fuga" が返る 

補足 : 型定義ファイルについて

自分のソースコードに対して declareを都度記載するのも良いのですが、

既存のJavaScriptのライブラリをTypeScriptで利用する場合や、外部に提供する事が事前にわかっているものなど、上記のアンビエント指定を都度行う必要があるので ***.d.tsという形式のアンビエント宣言専用の別ファイルを用意すると良い。

用意したファイルはnpm registryに保管、npm installで入手できる状態にすると吉。

カテゴリ