前へ

次へ

演習 - 外部タイプ ライブラリにアクセスする

完了

ほとんどすべてのプロジェクトでサードパーティのライブラリが利用されます。 TypeScript を使用すると、作成したモジュールをインポートするのとほとんど同じ方法でライブラリをインポートできます。 しかし、モジュールとは異なり、JavaScript ライブラリには型定義がない場合があります。

ライブラリのインポート

JavaScript では、requires ステートメントを使って、コードで外部ライブラリを使用します。 TypeScript では、import ステートメントを使用して、それらにアクセスできます。 ライブラリとその型定義をインポートした後で、それをコードで使用して、Intellisense と型チェックの利点を得ることができます。

タイプ ライブラリ

TypeScript を使用する主な理由は、静的な型指定です。 外部タイプ ライブラリは、ほとんどすべての一般的なライブラリで使用でき、それを含まないライブラリ (JavaScript で記述されたものなど) に対してこの情報を提供します。 型定義のないライブラリを使用しようとすると、TypeScript コンパイラによってエラー メッセージが表示されることがあります。 これらの定義がない場合は、Intellisense を使用することもできません。

一部の JavaScript ライブラリには型定義がありますが、多くには存在しません。 オープンソース プロジェクトの DefinitelyTyped は、多くの一般的な JavaScript ライブラリ用の TypeScript 型定義のリポジトリです。 型定義は、@types プレフィックスを使用してインストールします。

型定義は、設計時に TypeScript によってのみ使用されるため、発行されたプロジェクトの一部である必要は "ありません"。 そのため、devDependencies としてそれらをインストールできます。

npm install --save-dev @types/<library-name>

Note

外部タイプ ライブラリを実装するには、Visual Studio Code などの IDE を使用する必要があります。 TypeScript プレイグラウンドでこれを行うことはできません。 演習を完了する前に、Visual Studio Code で開発環境を設定する方法の詳細について、このモジュールの後半にあるラボの設定セクションを参照してください。

演習

この演習では、dotenv というタイプ ライブラリをインストールして実装します。 この一般的に使用されるライブラリでは、.env ファイルから環境変数を process.env に読み込みます。これにより、構成の詳細をコードとは別に格納し、それらにアクセスすることができます。 dotenv を使用すると、接続文字列やその他の値 (コードの実行場所に応じて変更が必要になる場合がある) などを管理できます。

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

2. Main.ts という新しいファイルを追加します。

3. ターミナルから、既定の構成設定を使用して、新しい tsconfig.json ファイルを生成します。

   tsc --init
   

4. DefinitelyTyped に移動し、dotenv タイプ ライブラリを検索します。 DefinitelyTyped により、インストールするライブラリの名前とその他の実装に関する詳細が提供されます。

5. ターミナルから、npm を使用して、プロジェクト フォルダーに dotenv タイプ ライブラリをインストールします。

   npm install dotenv
   

6. dotenv 型定義では、node 型定義もインストールする必要があります。 コードからアクセスできるように、node によって process.env へのアクセスが提供されます。

   npm install --save-dev @types/node @types/dotenv
   

7. プロジェクトのルート ディレクトリに、.env という新しいファイルを作成します。 このファイルには、プロジェクトの環境固有の変数が含まれます。

8. .env で、NAME=VALUE という形式で新しい行に変数を追加します。 この例では、次の 3 つの変数を定義します。

   DB_HOST=localhost
   WEB_HOST=staging.adventure-works.com
   

9. Main.ts に、dotenv タイプ ライブラリをインポートします。

   import dotenv from 'dotenv';
   

10. 変数に dotenv.config() を割り当てます。 config により、.env ファイルが読み取られ、内容が解析され、process.env に割り当てられ、読み込まれた内容を含む parsed キーまたは失敗した場合は errorキーを持つオブジェクトが返されます。

    const result = dotenv.config();
    

11. これで、TypeScript では config オブジェクトに対して Intellisense と型チェックを提供できるようになりました。 「result.」と入力すると、result に 2 つのプロパティ (error と parsed) があることがわかります。 エラー チェック ステートメントを追加して、config 操作が想定どおりに動作したことを確認します。

    if (result.error) {
        throw result.error;
    }
    

12. parsed プロパティの内容をコンソールに返します。

    console.log(result.parsed);  // Returns { DB_HOST: 'localhost', WEB_HOST: 'staging.adventure-works.com' }
    

13. process.env の各キーに含まれる値にアクセスし、その値をコンソールに返します。

    console.log(process.env.DB_HOST);
    console.log(process.env.WEB_HOST);
    

この演習では、dotenv の使用例を示します。 コードでの使用方法の詳細については、「dotenv」を参照してください。

演習のソリューション

この演習のソリューションを確認するには、コマンド プロンプトで次のように入力してリポジトリをクローンします。

git clone https://github.com/MicrosoftDocs/mslearn-typescript
cd mslearn-typescript/code/module-07/module07-exercise-02-end
code .

続行