モジュールと名前空間入門

TypeScriptのモジュールと名前空間は、特に大規模なプロジェクトでコードを整理し、構造化するのに役立ちます。

どちらも似た目的を果たしますが、使い方は異なります。このレッスンでは、その違いと使い方を説明します。

モジュールとは何ですか

モジュールとは、変数、関数、クラスなどの機能をエクスポートし、アプリケーションの他の部分で再利用できるファイルまたはコードのまとまりです。

TypeScriptでは、インポートとエクスポートにESモジュールを使用します。ESモジュールは現在、JavaScriptの標準になっています。

モジュールでのエクスポートとインポート

exportを使ってモジュールからコードをエクスポートし、importを使ってインポートできます:

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

別のファイルでインポートします:

// app.ts
import { add } from './math';
console.log(add(2, 3));

// math.ts
export function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from './math';
console.log(add(2, 3));

デフォルトエクスポート

TypeScriptでは、モジュールから1つの値をエクスポートできるデフォルトエクスポートも使用できます:

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}

中かっこを付けずにインポートします:

// app.ts
import add from './math';
console.log(add(2, 3));

// math.ts
export default function add(a: number, b: number): number {
  return a + b;
}

// app.ts
import add from './math';
console.log(add(2, 3));

名前空間とは何ですか

TypeScriptの名前空間は、関連するコードを1つの名前の下にまとめる方法です。コードを整理し、名前の衝突を避けるのに役立ちます。

名前空間はnamespaceキーワードを使って定義します。

名前空間の作成と使用

名前空間の例を見てみましょう:

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

次のように使用できます:

console.log(MathUtils.add(2, 3));

namespace MathUtils {
  export function add(a: number, b: number): number {
    return a + b;
  }
}

console.log(MathUtils.add(2, 3));

モジュールと名前空間の比較

モジュールと名前空間の主な違いは次のとおりです:

• モジュールはファイル単位で構成され、ESモジュール構文をサポートします。
• 名前空間は1つのファイル内でコードを整理するのに適していますが、現代のアプリケーションでは古い方法と見なされています。

ベストプラクティス

TypeScriptを使う際は、次の点に注意してください:

• 新しいプロジェクトでは、現代のJavaScript標準に沿ったモジュールを使用してください。
• 名前空間は、レガシープロジェクトや小規模なプロジェクトに限って検討してください。
• コードは常に整理し、一貫性を保ってください。

おめでとうございます！

モジュールと名前空間を使ってTypeScriptプロジェクトを構成し、整理する方法を学びました。練習を続けて、これらの重要な概念を身につけていきましょう。