演習 - シングルファイル名前空間を使用してコードを編成する

完了

名前空間は、1 つの TypeScript ファイル内または複数の TypeScript ファイル間に実装できます。

Note

マルチファイル名前空間を実装するには、Visual Studio Code などの IDE を使用する必要があります。 TypeScript Playground でこれを行うことはできません。

次の手順を実行して、シングルファイル名前空間を定義します。

  1. 新しい Visual Studio Code ワークスペースを開きます。

  2. module08_exercise.ts という名前の新しいファイルを作成します。

  3. namespace キーワードと名前空間名を使用して、新しい名前空間を定義します。 単一の TypeScript ファイルの中に、必要な数の名前空間を定義できます。 ファイルの先頭に、GreetingsGreetingsWithLength という名前の 2 つの名前空間を定義します。

    namespace Greetings {
    }
    namespace GreetingsWithLength {
    }
    
  4. これで、名前空間定義の内側に、関数とクラスを定義できるようになりました。 名前空間に定義されているすべてのコンポーネントは、その名前空間にスコープが設定され、グローバル スコープから削除されます。 returnGreeting という名前の新しい関数を Greetings 名前空間に追加します。 この関数は、パラメーターの値をコンソールに返します。

    namespace Greetings {
        function returnGreeting (greeting: string) {
            console.log(`The message from namespace Greetings is ${greeting}.`);
        }
    }
    
  5. 2 つの新しい関数 (returnGreetinggetLength) を 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
        }
    }
    
  6. 関数またはクラスを名前空間の外側のコードで使用できるようにする場合は、名前の前に 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
        }
    }
    
  7. 名前空間内のクラスまたは関数を使用するには、コンポーネント名の前に名前空間名を付けます。 名前空間を指定せずに returnGreeting 関数を呼び出してみてください。 この場合、両方の returnGreeting 関数がグローバル名前空間のスコープ外にあるため、エラーが返されます。 次に、Greetings または GreetingsWithLengthreturnGreeting 関数の前に追加して試してみてください。 これにより、該当する名前空間内の関数にアクセスできるようになります。

    returnGreeting('Hello');                     // Returns error
    Greetings.returnGreeting('Bonjour');         // OK
    GreetingsWithLength.returnGreeting('Hola');  // OK
    

入れ子になった名前空間を使用してコードを編成する

名前空間内に名前空間を入れ子にすることもできます。これにより、コードを編成するためのオプションがさらに提供されます。

コード エディターで作業を続けます。

  1. 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
            }
        }
    }
    
  2. 関数を呼び出すには、最も外側の名前空間の名前である AllGreetings から始めて、ピリオドに続けて名前空間階層の次のレベルである Greetings または GreetingsWithLength を入力します。 関数名に達するまで、下位レベルの階層を指定していきます。

    AllGreetings.Greetings.returnGreeting('Bonjour');        // OK
    AllGreetings.GreetingsWithLength.returnGreeting('Hola');  // OK
    

名前空間エイリアスの定義

TypeScript では、入れ子になった名前空間を簡単に移動できる階層が作成されます。 ただし、入れ子になった名前空間が複雑になるにつれて、コードを短縮して簡素化するためにエイリアスを作成したくなることがあります。 これを行うには、import キーワードを使用します。

コード エディターで作業を続けます。

  1. import greet = AllGreetings.Greetings」と入力します。 これにより、AllGreetings.Greetings を表す greet という名前の新しいエイリアスが定義されます。 これで、コードの中で、AllGreetings.Greetings の代わりに greet を使用できるようになりました。

    import greet = AllGreetings.Greetings;
    greet.returnGreeting('Bonjour');
    

シングルファイル名前空間のコンパイル

シングルファイル名前空間は、他の TypeScript ファイルをコンパイルするのと同じ方法でコンパイルします。 名前空間は TypeScript 専用のコンストラクトであるため、結果として得られる JavaScript コードから削除され、名前空間のようなオブジェクトを形成するために、必要に応じて入れ子になった変数に変換されます。