演習 - シングルファイル名前空間を使用してコードを編成する
名前空間は、1 つの TypeScript ファイル内または複数の TypeScript ファイル間に実装できます。
Note
マルチファイル名前空間を実装するには、Visual Studio Code などの IDE を使用する必要があります。 TypeScript Playground でこれを行うことはできません。
次の手順を実行して、シングルファイル名前空間を定義します。
新しい Visual Studio Code ワークスペースを開きます。
module08_exercise.ts という名前の新しいファイルを作成します。
namespace
キーワードと名前空間名を使用して、新しい名前空間を定義します。 単一の TypeScript ファイルの中に、必要な数の名前空間を定義できます。 ファイルの先頭に、Greetings
とGreetingsWithLength
という名前の 2 つの名前空間を定義します。namespace Greetings { } namespace GreetingsWithLength { }
これで、名前空間定義の内側に、関数とクラスを定義できるようになりました。 名前空間に定義されているすべてのコンポーネントは、その名前空間にスコープが設定され、グローバル スコープから削除されます。
returnGreeting
という名前の新しい関数をGreetings
名前空間に追加します。 この関数は、パラメーターの値をコンソールに返します。namespace Greetings { function returnGreeting (greeting: string) { console.log(`The message from namespace Greetings is ${greeting}.`); } }
2 つの新しい関数 (
returnGreeting
とgetLength
) をGreetingsWithLength
名前空間に追加します。returnGreeting
関数は、ヘルパー関数getLength
を使用して、あいさつをコンソールに返す前にそのメッセージの長さを特定します。namespace GreetingsWithLength { function returnGreeting (greeting: string) { let greetingLength = getLength(greeting); console.log(`The message from namespace GreetingsWithLength is ${greeting}. It is ${greetingLength} characters long.`); } function getLength(message: string): number { return message.length } }
関数またはクラスを名前空間の外側のコードで使用できるようにする場合は、名前の前に
export
キーワードを追加します。export
キーワードを省略した場合、コンポーネントは名前空間の内側でのみ使用できます。 これは、名前空間内の他のコンポーネントに直接アクセスできる必要があるコンポーネントを定義する場合に実行できます。 両方の名前空間内のreturnGreeting
関数にexport
キーワードを追加します。getLength
関数はGreetingsWithLength
名前空間の外でアクセスする必要はないため、export
キーワードは省略します。namespace Greetings { export function returnGreeting (greeting: string) { console.log(`The message from namespace Greetings is ${greeting}.`); } } namespace GreetingsWithLength { export function returnGreeting (greeting: string) { let greetingLength = getLength(greeting); console.log(`The message from namespace GreetingsWithLength is ${greeting}. It is ${greetingLength} characters long.`); } function getLength(message: string): number { return message.length } }
名前空間内のクラスまたは関数を使用するには、コンポーネント名の前に名前空間名を付けます。 名前空間を指定せずに
returnGreeting
関数を呼び出してみてください。 この場合、両方のreturnGreeting
関数がグローバル名前空間のスコープ外にあるため、エラーが返されます。 次に、Greetings
またはGreetingsWithLength
をreturnGreeting
関数の前に追加して試してみてください。 これにより、該当する名前空間内の関数にアクセスできるようになります。returnGreeting('Hello'); // Returns error Greetings.returnGreeting('Bonjour'); // OK GreetingsWithLength.returnGreeting('Hola'); // OK
入れ子になった名前空間を使用してコードを編成する
名前空間内に名前空間を入れ子にすることもできます。これにより、コードを編成するためのオプションがさらに提供されます。
コード エディターで作業を続けます。
AllGreetings
という名前の新しい名前空間を作成し、前に作成したGreetings
名前空間とGreetingsWithLength
名前空間をその内側に移動します。 両方の名前空間名の前にexport
キーワードを追加します。 これにより、AllGreetings
名前空間の外側で名前空間にアクセスできるようになります。namespace AllGreetings { export namespace Greetings { export function returnGreeting (greeting: string) { console.log(`The message from namespace Greetings is ${greeting}.`); } } export namespace GreetingsWithLength { export function returnGreeting (greeting: string) { let greetingLength = getLength(greeting); console.log(`The message from namespace GreetingsWithLength is ${greeting}. It is ${greetingLength} characters long.`); } function getLength(message: string): number { return message.length } } }
関数を呼び出すには、最も外側の名前空間の名前である
AllGreetings
から始めて、ピリオドに続けて名前空間階層の次のレベルであるGreetings
またはGreetingsWithLength
を入力します。 関数名に達するまで、下位レベルの階層を指定していきます。AllGreetings.Greetings.returnGreeting('Bonjour'); // OK AllGreetings.GreetingsWithLength.returnGreeting('Hola'); // OK
名前空間エイリアスの定義
TypeScript では、入れ子になった名前空間を簡単に移動できる階層が作成されます。 ただし、入れ子になった名前空間が複雑になるにつれて、コードを短縮して簡素化するためにエイリアスを作成したくなることがあります。 これを行うには、import
キーワードを使用します。
コード エディターで作業を続けます。
「
import greet = AllGreetings.Greetings
」と入力します。 これにより、AllGreetings.Greetings
を表すgreet
という名前の新しいエイリアスが定義されます。 これで、コードの中で、AllGreetings.Greetings
の代わりにgreet
を使用できるようになりました。import greet = AllGreetings.Greetings; greet.returnGreeting('Bonjour');
シングルファイル名前空間のコンパイル
シングルファイル名前空間は、他の TypeScript ファイルをコンパイルするのと同じ方法でコンパイルします。 名前空間は TypeScript 専用のコンストラクトであるため、結果として得られる JavaScript コードから削除され、名前空間のようなオブジェクトを形成するために、必要に応じて入れ子になった変数に変換されます。
ヘルプが必要ですか? Microsoft のトラブルシューティング ガイドをご覧になるか、問題を報告して具体的なフィードバックをお送りください。