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

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

重要

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

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

TypeScript npm パッケージを使用して TypeScript のサポートを追加します。 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 を 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 を使用してサードパーティ製のツールを構成する場合、 Tools>Options>Projects とソリューション>Web パッケージ管理>External Web Tools で構成されているパスは使用しないでください。 これらの設定は、他のプロジェクトの種類に使用されます。

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

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

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

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

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

アプリをトランスパイルした後に実行する手順については、「 Node.js と Express アプリを作成する」を参照してください。

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

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

関連コンテンツ

プロパティ、React、Angular、Vue

  • Last updated on