npm を使用して TypeScript コードをコンパイルする

TypeScript npm パッケージを使用して、JavaScript Project System (JSPS) または .esproj に基づくプロジェクトに TypeScript サポートを追加します。 Visual Studio 2019 以降では、TypeScript SDK ではなく npm パッケージを使用することをお勧めします。 TypeScript npm パッケージは、さまざまなプラットフォームと環境で移植性を高めます。

重要

ASP.NET Core プロジェクトの場合は、npm の代わりに NuGet パッケージ を使用して TypeScript のサポートを追加します。

npm を使用して TypeScript のサポートを追加する

TypeScript npm パッケージ では、TypeScript のサポートが追加されます。 TypeScript 2.1 以降の npm パッケージがプロジェクトにインストールされると、対応するバージョンの TypeScript 言語サービスがエディターに読み込まれます。

1. Visual Studio または Node.js ランタイムの開発ワークロードをインストールする必要があるかどうかを確認します。

   JavaScript プロジェクト システム (JSPS) または .esprojを使用して作成されたプロジェクトの場合、追加のワークロードは必要ありません。 Node.jsに含まれている npm (https://www.npmjs.com/) をインストールするだけで済みます。

2. プロジェクトにまだ含まれていない場合は、TypeScript npm パッケージをインストールします。

   ソリューション エクスプローラー (右側のウィンドウ) から、プロジェクト ルートで package.json を開きます。 一覧表示されるパッケージは、ソリューション エクスプローラーの npm ノードの下にあるパッケージに対応しています。 詳細については、「npm パッケージの管理」を参照してください。

   出力 ウィンドウで npm オプションをオンにして、パッケージのインストールの進行状況を確認します。 インストールされているパッケージは、ソリューション エクスプローラーの npm ノードに表示されます。

3. プロジェクトにまだ含まれていない場合は、プロジェクト ルートに tsconfig.json ファイルを追加します。 ファイルを追加するには、プロジェクト ノードを右クリックし、[新しい項目 追加] > 選択。 TypeScript JSON 構成ファイルを選択し、追加をクリックします。

   すべての項目テンプレートが表示されない場合は、[すべてのテンプレートの表示]選択し、項目テンプレートを選択します。

   Visual Studio によって、tsconfig.json ファイルがプロジェクト ルートに追加されます。 このファイルを使用して、TypeScript コンパイラのオプションを 構成できます。

4. tsconfig.json を開き、更新して、必要なコンパイラ オプションを設定します。

   単純な tsconfig.json ファイルの例を次に示します。

   {
     "compilerOptions": {
       "noImplicitAny": false,
       "noEmitOnError": true,
       "removeComments": false,
       "sourceMap": true,
       "target": "es5",
       "outDir": "dist"
     },
     "include": [
       "scripts/**/*"
     ]
   }
   

   この例では、次の操作を行います。

   • を含める は、TypeScript (*.ts) ファイルを見つける場所をコンパイラに指示します。
   • outDir オプションは、TypeScript コンパイラによってトランスパイルされるプレーンな JavaScript ファイルの出力フォルダーを指定します。
   • コンパイラが sourceMap ファイルを生成するかどうかを示すのが sourceMap オプションです。

   前の構成では、TypeScript の構成の基本的な概要のみが示されています。 その他のオプションについては、「tsconfig.json」を参照してください。

アプリケーションをビルドする

1. TypeScript (.ts) または TypeScript JSX (.tsx) ファイルをプロジェクトに追加し、TypeScript コードを追加します。 TypeScript の簡単な例を次に示します。

   let message: string = 'Hello World';
   console.log(message);
   

2. package.jsonで、次のスクリプトを使用して、Visual Studio のビルドコマンドとクリーン コマンドのサポートを追加します。

   "scripts": {
     "build": "tsc --build",
     "clean": "tsc --build --clean"
   },
   

   webpack などのサード パーティ製ツールを使用してビルドするには、package.json ファイルにコマンド ライン ビルド スクリプトを追加します。

   "scripts": {
      "build": "webpack-cli app.tsx --config webpack-config.js"
   }
   

3. アプリの URL やランタイム コマンドなどのビルドと配置のオプションを構成する必要がある場合は、ソリューション エクスプローラーでプロジェクト ノードを右クリックし、[ プロパティ] を選択します。

   手記

   JavaScript Project System (JSPS) または .esproj を使用してサードパーティ製のツールを構成する場合、 Tools>Options>Projects とソリューション>Web パッケージ管理>External Web Tools で構成されているパスは使用しないでください。 これらの設定は、他のプロジェクトの種類に使用されます。

4. 「」「Build >」「Build Solution」を選択します。

   アプリは、実行時に自動的にビルドされます。 ただし、ビルド プロセス中に次の処理が発生する可能性があります。

   ソース マップを生成した場合は、outDir オプションで指定されたフォルダーを開くと、生成された *.js ファイルと生成された *js.map ファイルが見つかります。

   ソース マップ ファイルは、デバッグに必要です。

アプリケーションを実行する

コンパイル後にアプリを実行する手順については、「Node.js および Express アプリの作成 」を参照してください。

ビルド タスクを自動化する

Visual Studio のタスク ランナー エクスプローラーを使用すると、npm や webpack などのサード パーティ製ツールのタスクを自動化できます。

• NPM タスク ランナー - package.jsonで定義されている npm スクリプトのサポートを追加します。 yarn がサポートされています。
• Webpack タスク ランナー - webpack のサポートを追加します。

関連コンテンツ

プロパティ、React、Angular、Vue