TypeScript のグローバル変数

1. TypeScript で新しいプロジェクトを作成する
2. グローバル オブジェクトとは
3. TypeScript でグローバル変数を宣言する
4. TypeScript でグローバル変数にアクセスする
5. まとめ

TypeScript のドキュメント では、グローバル ライブラリをグローバル スコープからアクセスされるモジュールとして定義しています。通常、メンバーにアクセスするために import キーワードを使用していない場合、グローバル スコープを使用していることがわかります。

グローバル ライブラリには、グローバルな 変数、インターフェース、名前空間、および他のモジュールがアプリケーションでアクセスできるその他の宣言が含まれています。 このチュートリアルでは、TypeScript でグローバル変数を作成し、他のファイルからそれらにアクセスする方法を説明します。

TypeScript で新しいプロジェクトを作成する

WebStorm IDEA を開き、File > New > Project を選択します。 開いたウィンドウで、左側の Node.js を選択し、Location セクションでプロジェクト名を untitled から global-scope に変更するか、任意の名前を使用します。

このプロジェクトを作成する前に、node ランタイム環境がインストールされていることを確認して、Node interpreter および Package manager セクションがファイル システムから自動的に追加されるようにします。

最後に、Create ボタンを押してプロジェクトを生成します。 プロジェクトが生成されたら、キーボード ショートカット Alt+F12 を使用して新しいターミナル ウィンドウを開き、次のコマンドを使用して tsconfig.json ファイルを作成します。

~/WebstormProjects/global-scope$ tsc --init

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true,
    "strict": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

このファイルの構成のほとんどは自動生成され、トランスパイル エラーが発生した場合に JavaScript ファイルが生成されないように、noEmitOnError: true プロパティを追加しました。

グローバル オブジェクトとは

グローバル変数を作成する前に、このコンテキストで重要な役割を果たすため、グローバル オブジェクトとは何かを理解する必要があります。 JavaScript 環境では、グローバル変数が var キーワードを使用して作成されると、グローバル オブジェクトに追加されます。

Node.js 環境では、変数は実行コンテキストに応じてグローバル オブジェクトに追加されます。 利用可能なさまざまな実行コンテキストには、ブラウザー、ワーカーで実行されるコード、または Node.js によって実行されるコードが含まれます。

これらの各コンテキストのオブジェクトには、Window、Worker、および global が含まれます。

実行コンテキストを考慮せずにグローバル オブジェクトにアクセスするには、globalThis という名前のプロパティを使用します。 globalThis プロパティは、グローバル スコープに追加されたプロパティにアクセスするのに役立ちます。

let または const を使用して宣言された変数はグローバル スコープに追加されず、var キーワードを使用して宣言された変数はグローバル スコープに追加されることに注意してください。

TypeScript でグローバル変数を宣言する

global-scope パッケージの下に module.d.ts という名前のファイルを作成し、次のコードをコピーしてファイルに貼り付けます。

declare var userName: string

declare var age: number

グローバル変数用のモジュールを作成する場合、この例で行ったように、拡張子 .d.ts を持つファイル内で作成する必要があります。

このコードでは、userName と age という名前の 2つのグローバル変数を作成しました。 変数宣言の前にキーワード declare を付けたことに注意してください。

トップレベルで宣言されたグローバル変数には、このファイルで宣言された変数の規則であるため、declare キーワードが前に付いていることを確認する必要があります。

TypeScript でグローバル変数にアクセスする

global-scope パッケージの下に main.ts という名前のファイルを作成し、次のコードをコピーしてファイルに貼り付けます。

globalThis.userName = "john doe"
globalThis.age = 34

function main(){
    console.log(userName);
    console.log(age);
}
main();

このコードでは、globalThis プロパティを使用して、グローバル オブジェクトからグローバル変数 userName と age にアクセスし、各グローバル変数をそのタイプの値で初期化しました。

main() 関数は、各グローバル変数の値をコンソールに記録します。 次のコマンドを使用してこのコードを実行し、コードが期待どおりに機能していることを確認します。

~/WebstormProjects/global-scope$ tsc && node main.js

tsc コマンドは TypeScript コードを JavaScript コードにトランスパイルし、node コマンドは main.js という名前のファイルを実行します。 出力が次のようになっていることを確認します。

john doe
34

まとめ

このチュートリアルでは、TypeScript でグローバル変数を作成する方法を説明しました。 このチュートリアルで取り上げるトピックには、グローバル オブジェクトとは何か、グローバル変数を宣言する方法、およびグローバル変数にアクセスする方法が含まれます。

.d.ts ファイルで宣言できるのは変数だけではないことに注意してください。 インターフェイス、クラス、関数などを宣言できます。

これらすべての詳細を変数に含めたい場合は、期待どおりに機能する namespace を使用できます。