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

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

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

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

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

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

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

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

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

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

   Visual Studioは、tsconfig.json ファイルをプロジェクト ルートに追加します。 このファイルを使用すると、TypeScript を JavaScript にトランスパイルする TypeScript コンパイラである tsc の オプションを構成 できます。

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

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

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

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

   • を含める は、TypeScript (*.ts) ファイルを見つける場所をコンパイラに指示します。
   • outDir オプションは、TypeScript コンパイラである tsc によってトランスパイルされるプレーンな 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 やランタイム コマンドなどのビルドと配置のオプションを構成する必要がある場合は、ソリューション エクスプローラーでプロジェクト ノードを右クリックし、Properties を選択します。

   手記

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

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

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

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

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

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

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

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

関連コンテンツ

プロパティ、React、Angular、Vue