迷ったらコレ！TypeScriptでモジュール内のグローバル変数を呼び出すベストプラクティス

2024-04-02

TypeScriptでモジュール内のグローバル変数を呼び出す方法

export キーワードを使用する

モジュール内で定義された変数を他のモジュールから参照できるようにするには、export キーワードを使用します。

// my-module.ts

export const globalVariable = 1;

// other-module.ts

import { globalVariable } from "./my-module";

console.log(globalVariable); // 1 が出力される

declare キーワードを使用する

外部モジュールで定義されたグローバル変数を呼び出すには、declare キーワードを使用します。

// other-module.ts

declare const globalVariable: number;

console.log(globalVariable); // エラーが発生する

// my-module.ts

export const globalVariable = 1;

// other-module.ts

import { globalVariable } from "./my-module";

console.log(globalVariable); // 1 が出力される

global オブジェクトを使用する

すべてのモジュールで共有されるグローバル変数は、global オブジェクトにアクセスすることで呼び出すことができます。

// my-module.ts

globalThis.globalVariable = 1;

// other-module.ts

console.log(globalThis.globalVariable); // 1 が出力される

名前空間を使用する

モジュール内で定義された変数を名前空間に区切って呼び出すことができます。

// my-module.ts

export namespace MyModule {
  export const globalVariable = 1;
}

// other-module.ts

import { MyModule } from "./my-module";

console.log(MyModule.globalVariable); // 1 が出力される

TypeScriptでモジュール内のグローバル変数を呼び出すには、いくつかの方法があります。それぞれの方法の特徴を理解して、状況に応じて適切な方法を選択してください。

補足

上記の例は、基本的な方法を説明するために簡略化されています。実際のコードでは、より適切なモジュール構造や型定義を使用する必要があります。
TypeScriptのバージョンによっては、上記の方法の動作が異なる場合があります。詳細については、TypeScriptのドキュメントを参照してください。

my-module.ts

// export キーワードを使用する
export const globalVariable1 = 1;

// declare キーワードを使用する
declare const globalVariable2: number;

// global オブジェクトを使用する
globalThis.globalVariable3 = 1;

// 名前空間を使用する
export namespace MyModule {
  export const globalVariable4 = 1;
}

// export キーワードを使用する
import { globalVariable1 } from "./my-module";

console.log(globalVariable1); // 1 が出力される

// declare キーワードを使用する
import { globalVariable2 } from "./my-module";

console.log(globalVariable2); // エラーが発生する

// my-module.ts で globalVariable2 に型情報を追加
declare const globalVariable2: number;

console.log(globalVariable2); // エラーが発生しなくなる

// global オブジェクトを使用する
import { globalVariable3 } from "./my-module";

console.log(globalVariable3); // 1 が出力される

// 名前空間を使用する
import { MyModule } from "./my-module";

console.log(MyModule.globalVariable4); // 1 が出力される

このコードを実行することで、それぞれの方法でモジュール内のグローバル変数を呼び出すことができることを確認できます。

TypeScriptでモジュール内のグローバル変数を呼び出すその他の方法

import キーワードと as キーワードを使用すると、モジュール内のグローバル変数を別の名前で呼び出すことができます。

// my-module.ts

export const globalVariable = 1;

// other-module.ts

import { globalVariable as myVariable } from "./my-module";

console.log(myVariable); // 1 が出力される

require 関数を使用して、モジュール内のグローバル変数を動的に呼び出すことができます。

// my-module.ts

export const globalVariable = 1;

// other-module.ts

const myModule = require("./my-module");

console.log(myModule.globalVariable); // 1 が出力される

アンビエントモジュール

declare キーワードを使用して、アンビエントモジュールを定義することができます。アンビエントモジュールは、実際のファイルが存在しなくても、モジュール内のグローバル変数を定義するために使用できます。

// my-module.d.ts

declare const globalVariable: number;

// other-module.ts

import { globalVariable } from "./my-module";

console.log(globalVariable); // エラーが発生する

// my-module.ts

export const globalVariable = 1;

// other-module.ts

import { globalVariable } from "./my-module";

console.log(globalVariable); // 1 が出力される