演習 - モジュール コンポーネントをエクスポートおよびインポートする

  • 5 分

変数、クラス、インターフェイス、および関数の宣言を複数のモジュールに整理してから、コードでこれらのコンポーネントを使用する方法を見てみましょう。

Note

モジュールを実装するには、Visual Studio Code などの IDE を使用する必要があります。 TypeScript プレイグラウンドでこれを行うことはできません。

モジュール コンポーネントをエクスポートする

モジュール コンポーネントをエクスポートするには、export キーワードを使用します。

演習のこのパートでは、関連する関数を個別のモジュールに整理してから、関数の宣言をエクスポートします。

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

  2. greetings_module.ts という新しいファイルを作成し、それに returnGreeting という以下の関数を追加します。 関数名の前に export キーワードを追加して、他のモジュールで使用できるようにします。

    export function returnGreeting (greeting: string) {
    console.log(`The message from Greetings_module is ${greeting}.`);
}

  3. greetings-utilities_module.ts という 2 番目のファイルを作成してから、次の 2 つの関数、returnGreeting と getLength を新しいファイルに追加します。 returnGreeting 関数の前に export を追加して、他のモジュールで使用できるようにします。 getLength 関数をエクスポートする必要はありません。これはモジュールのスコープ内でのみ使用されるためです。

    export function returnGreeting (greeting: string) {
    let greetingLength = getLength(greeting);
    console.log(`The message from GreetingsLength_module is ${greeting}. It is ${greetingLength} characters long.`);
}
function getLength(message: string): number {
    return message.length
}

モジュール コンポーネントをインポートする

モジュールからエクスポートされたコンポーネントを使用するには、import ステートメントを使用します。 import ステートメントでは、目的に応じて複数の形式を取ることができます。

モジュールから 1 つのエクスポートをインポートするには、次のようにします。

import { <component name> } from '<module name>'

インポートの名前を変更するには、as キーワードを使用します。

import { <component name> as <new name> } from '<module name>'

モジュール全体を 1 つの変数にインポートし、それを使用してモジュールのエクスポートにアクセスするには、次のようにします。

import * as <variable name> from '<module name>'

演習の次のパートでは、2 つのモジュールのそれぞれから新しいモジュールにコンポーネントをインポートします。

  1. main.ts という新しいファイルを作成します。 このファイルには、import ステートメントを含め、アプリケーションのメイン コードが含まれます。

  2. import キーワードを使用して、greetings_module.ts から returnGreeting 関数をインポートします。

    import { returnGreeting } from './greetings_module.js';         // imports a single function in the module

  3. greetings_module.ts に複数のコンポーネントが含まれていた場合は、次のステートメントに示すように、モジュール全体を 1 つの変数 (allGreetingFunctions など) にインポートできます。 その後、その変数を使用して、すべてのモジュール エクスポートにアクセスできます。

    import * as allGreetingFunctions from './greetings_module.js';  // imports all exported components in the module

  4. import { returnGreeting } from './greetings-utilities_module.js' ステートメントを使用して、greetings-utilities_module.ts から returnGreeting 関数をインポートしてみます。 両方のファイルに returnGreeting 関数が含まれていて、現在、main.ts のグローバル スコープで名前が競合しているため、エラーが発生していることがわかります。

  5. returnGreeting の 2 番目のインスタンスに新しい名前を割り当てることにより、名前の競合を修正します。 { returnGreeting } を { returnGreeting as returnGreetingLength } で置き換え これで、コードで関数名の代わりに returnGreetingLength を使用できるようになりました。

    import { returnGreeting as returnGreetingLength } from './greetings-utilities_module.js';

    重要

    生成される JavaScript を Web ブラウザーで実行する場合は、import ステートメントでファイル名に .js ファイル拡張子を追加する必要があります。 詳細については、「Compiled JavaScript import is missing file extension」(コンパイルされた JavaScript インポートにファイル拡張子がない) を参照してください。

  6. これで、コードで returnGreetings 関数を使用できるようになりました。

    returnGreeting('Hola!')  // Displays 'The message from Greetings_module is Hola!'
allGreetingFunctions.returnGreeting('Bonjour');  // Displays 'The message from Greetings_module is Bonjour!'
returnGreetingLength('Ciao!');  // Displays 'The message from GreetingsWithLength_module is Ciao! It is 5 characters long.'