TypeScript コードのコンパイル (Node.js)

  • [アーティクル]

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. 手順に従って Node.js 開発ワークロードと Node.js ランタイムをインストールします。

    Visual Studio の統合をシンプルにするために、Node.js TypeScript テンプレートのいずれかを使用してプロジェクトを作成します (空の Node.js Web アプリケーション テンプレートなど)。 それ以外の場合は、Visual Studio に含まれている Node.js JavaScript テンプレートを使用してここに記載されている手順に従います。 または、[フォルダーを開く] プロジェクトを使用します。

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

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

    Node.js プロジェクトの場合は、コマンド ラインまたは IDE を使用して TypeScript npm パッケージをインストールできます。 IDE を使用してインストールするには、ソリューション エクスプローラーで npm ノードを右クリックして [Install New npm package](新しい npm パッケージをインストールする) を選択し、「TypeScript」を検索して、パッケージをインストールします。

    [出力] ウィンドウの [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/**/*"
  ]
}

    この例では、次のように記述されています。

    • include によって、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 の build コマンドと clean コマンドのサポートを追加します。

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

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

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

    React での webpack と webpack 構成ファイルの使用例については、Node.js と React を使用した Web アプリの作成に関する記事をご覧ください。

    TypeScript での Vue.js の使用例については、Vue.js アプリケーションの作成に関する記事をご覧ください。

  3. スタートアップ ページ、Node.js ランタイムへのパス、アプリケーション ポート、またはランタイム引数などのオプションを構成する必要がある場合は、ソリューション エクスプローラーでプロジェクト ノードを右クリックし、 [プロパティ] を選択します。

    注意

    サード パーティ製ツールを構成する場合、 [ツール]>[オプション]>[プロジェクトおよびソリューション]>[Web パッケージ管理]>[外部 Web ツール] で構成したパスは、Node.js プロジェクトで使用されません。 これらの設定は、他のプロジェクトの種類で使用されます。

  4. [ビルド] > [ソリューションのビルド] の順に選択します。

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

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

    ソース マップ ファイルはデバッグで必要となります。

アプリケーションの実行

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

ビルド タスクの自動化

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

関連するコンテンツ

プロパティ、React、Angular、Vue