グローバル変数を使いこなして、TypeScript コードを効率的に書こう
2024-04-02
TypeScriptでグローバル変数を宣言する方法
var キーワードを使用する
JavaScriptと同じように、var キーワードを使ってグローバル変数を宣言できます。
// グローバル変数を宣言
var count = 0;
function incrementCount() {
// グローバル変数を更新
count++;
}
console.log(count); // 0
incrementCount();
console.log(count); // 1
この方法では、var キーワードを使って宣言された変数は、プログラム全体でアクセス可能になります。
declare キーワードを使って、すでに存在するグローバル変数を宣言することができます。
// 既存のグローバル変数を宣言
declare var process: any;
function printProcessInfo() {
// グローバル変数を使用
console.log(process.env.NODE_ENV);
}
printProcessInfo(); // "development"
この方法では、declare キーワードを使って宣言された変数は、型チェックのみが行われ、変数の初期化は行われません。
注意点
- グローバル変数はプログラム全体でアクセス可能なので、使いすぎるとコードが複雑になり、保守性が悪くなります。
- グローバル変数の使用は、必要最低限に留めるようにしましょう。
- 可能な場合は、モジュールスコープやローカルスコープで変数を宣言することを推奨します。
// グローバル変数を宣言
var count = 0;
function incrementCount() {
// グローバル変数を更新
count++;
}
console.log(count); // 0
incrementCount();
console.log(count); // 1
// 既存のグローバル変数を宣言
declare var process: any;
function printProcessInfo() {
// グローバル変数を使用
console.log(process.env.NODE_ENV);
}
printProcessInfo(); // "development"
モジュールスコープで変数を宣言する
// モジュールスコープで変数を宣言
export const message = "Hello, world!";
function printMessage() {
// モジュールスコープ内の変数を使用
console.log(message);
}
printMessage(); // "Hello, world!"
function printMessage() {
// ローカルスコープで変数を宣言
const message = "Hello, world!";
console.log(message);
}
printMessage(); // "Hello, world!"
// console.log(message); // エラー: message はローカルスコープ変数
モジュールファイルで export キーワードを使って変数を宣言すると、その変数はモジュール外部からアクセス可能になります。
// モジュールファイル
export const message = "Hello, world!";
// 別のファイル
import { message } from "./module";
console.log(message); // "Hello, world!"
namespace キーワードを使って名前空間を作成し、その中に変数を宣言すると、名前空間内でグローバル変数のように使用できます。
// 名前空間を使用する
namespace MyNamespace {
export const message = "Hello, world!";
}
console.log(MyNamespace.message); // "Hello, world!"
const キーワードを使って変数を宣言すると、その変数は再代入できません。これは、グローバル変数を誤って変更してしまうのを防ぐのに役立ちます。
// const キーワードを使用する
const message = "Hello, world!";
// message = "Goodbye, world!"; // エラー: message は再代入できません
typescript
