設計上の考慮事項
コードの編成には名前空間またはモジュールを使用できます。どちらにも、コードと宣言を含めることができます。
名前空間は単純な実装向きの簡単に使用できる、モジュール ローダーに依存しない方法ですが、モジュールには名前空間にはないいくつかの追加の利点があります。 モジュール:
- 依存関係を宣言します。
- コードを再利用しやすくします。
- 強力な分離を提供します。
- モジュール定義の内部ステートメントを非表示にし、宣言されたコンポーネントに関連付けられているメソッドとパラメーターのみを表示します。
- バンドル化をサポートする強力なツールを提供します。
- Node.js アプリケーションではモジュールが既定であるため、名前空間よりも推奨されます。
- 外部のメソッドまたはクラスへの参照はメソッドの呼び出しでのみインスタンス化されるため、トップダウン型の JavaScript フローの問題を解決できます。
また、ECMAScript 2015 以降、モジュールはこの言語のネイティブな部分であり、すべての対応エンジンの実装でサポートされている必要があります。 そのため、新しいプロジェクトでは、モジュールを使用してコードを編成することをお勧めします。
Note
同じプロジェクト内で名前空間とモジュールを組み合わせて使用しないことをお勧めします。
次の表に、モジュールと名前空間の概要と比較を示します。
| Module | 名前空間 |
|---|---|
| モジュールを使用して、機能を論理的にグループ化するためにコードを別個のファイルに編成します。 | 名前空間を使用して、機能を論理的にグループ化するためにコードを別個のファイルに編成します。 |
| モジュールは、グローバル スコープではなく、ローカル スコープで実行されます。 | 名前空間は、グローバル スコープではなく、ローカル スコープで実行されます。 |
| モジュールは宣言型です。モジュール間のリレーションシップは、ファイル レベルのインポートとエクスポートで指定されます。 | 名前空間では、それらの依存関係を宣言することはできません。 |
モジュールを定義するには、ファイル内で export または import キーワードを使用します。 最上位レベルのインポートまたはエクスポートを含むすべてのファイルは、モジュールとみなされます。 |
名前空間を定義するには、ファイル内で namespace キーワードを使用します。 namespace ステートメントは入れ子にすることができ、複数のファイルにまたがることができます。 |
個々のモジュール コンポーネントをモジュールの外部に公開するには、export キーワードを使用します。 |
個々の名前空間コンポーネントをモジュールの外部に公開するには、export キーワードを使用します。 |
あるモジュールのコンポーネントを別のモジュールで使用するには、import キーワードを使用します。 |
ある名前空間のコンポーネントを別の TypeScript ファイルで使用するには、トリプル スラッシュ (///) 構文を使用して reference ステートメントを追加します。 |
モジュールとそれに依存するすべてのファイルをコンパイルするには、tsc --module コマンドを使用します。 |
名前空間とそれに依存するすべてのファイルを含む TypeScript ファイルを別個の JavaScript ファイルにコンパイルするには、tsc コマンドを使用します。 |
| マルチファイルのモジュールを単一のモジュールにコンパイルすることはできません。 | 名前空間を含むすべての TypeScript ファイルを単一の JavaScript ファイルにコンパイルするには、tsc --outFile コマンドを使用します。 |
| モジュールでは、モジュール ローダー API を使用して別のモジュールがインポートされます。 モジュールをコンパイルするときに API を指定します。 | 名前空間は、HTML ページで <script> タグを使用して .js ファイルの名前を (順序正しく) 指定することで読み込まれます。 |
| モジュールでは、元の名前を使用するか名前を変更して、コンポーネントを再エクスポートできます。 | 名前空間では、コンポーネントを再エクスポートすることも、名前を変更することもできません。 |