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

TypeScript SDK を使用して、プロジェクトに TypeScript サポートを追加することができます。これは Visual Studio インストーラーで既定で使用できます。または npm を使用します。You can add TypeScript support to your projects using the TypeScript SDK, available by default in the Visual Studio installer or by using the npm. プロジェクトが Visual Studio 2019 で開発されている場合は、TypeScript npm パッケージを使用することをお勧めします。これにより、さまざまなプラットフォームや環境の間で移植性が向上します。For projects developed in Visual Studio 2019, we encourage you to use the TypeScript npm package for greater portability across different platforms and environments.

ASP.NET Core のプロジェクトでは、代わりに NuGet パッケージを使用することをお勧めします。For ASP.NET Core projects, it is recommended that you use the NuGet package instead.

npm を使用して TypeScript サポートを追加するAdd TypeScript support using npm

TypeScript npm パッケージによって、TypeScript サポートを追加できます。The TypeScript npm package adds TypeScript support. TypeScript 2.1 以降の npm パッケージがプロジェクトにインストールされているときは、対応するバージョンの TypeScript 言語サービスがエディターに読み込まれます。When the npm package for TypeScript 2.1 or higher is installed into your project, the corresponding version of the TypeScript language service gets loaded in the editor.

  1. 手順に従って Node.js 開発ワークロードと Node.js ランタイムをインストールします。Follow instructions to install the Node.js development workload and the Node.js runtime.

    最も簡単な方法で Visual Studio と統合するために、Node.js TypeScript テンプレートのいずれかを使用してプロジェクトを作成します (空の Node.js Web アプリケーション テンプレートなど)。For the simplest integration with Visual Studio, create your project using one of the Node.js TypeScript templates, such as the Blank Node.js Web Application template. それ以外の場合は、Visual Studio に含まれている Node.js JavaScript テンプレートを使用してここに記載されている手順に従うか、[フォルダーを開く] プロジェクトを使用します。Otherwise, use either a Node.js JavaScript template included with Visual Studio and follow instructions here, or use an Open Folder project.

  2. プロジェクトにまだ含まれていない場合は、TypeScript npm パッケージをインストールします。If your project doesn't already include it, install the TypeScript npm package.

    ソリューション エクスプローラー (右側のペイン) から、プロジェクトのルートにある package.json を開きます。From Solution Explorer (right pane), open the package.json in the project root. 一覧表示されるパッケージは、ソリューション エクスプローラーの npm ノードの下にあるパッケージと対応しています。The packages listed correspond to packages under the npm node in Solution Explorer. 詳細については、npm パッケージの管理に関するページを参照してください。For more information, see Manage npm packages.

    Node.js プロジェクトの場合は、コマンド ラインまたは IDE を使用して TypeScript npm パッケージをインストールできます。For a Node.js project, you can install the TypeScript npm package using the command line or the IDE. IDE を使用してインストールするには、ソリューション エクスプローラーで npm ノードを右クリックして [Install New npm package](新しい npm パッケージをインストールする) を選択し、「 TypeScript 」を検索して、パッケージをインストールします。To install using the IDE, right-click the npm node in Solution Explorer, choose Install New npm package , search for TypeScript , and install the package.

    [出力] ウィンドウの [npm] オプションをオンにして、パッケージのインストールの進行状況を確認します。Check the npm option in the Output window to see package installation progress. インストールされたパッケージは、ソリューション エクスプローラーの npm ノードの下に表示されます。The installed package shows up under the npm node in Solution Explorer.

  3. プロジェクトにまだ含まれていない場合は、プロジェクトのルートに .tsconfig ファイルを追加します。If your project doesn't already include it, add a .tsconfig file to your project root. ファイルを追加するには、プロジェクト ノードを右クリックし、 [追加] > [新しい項目] の順に選択します。To add the file, right-click the project node and choose Add > New Item . [TypeScript JSON 構成ファイル] を選択し、 [追加] をクリックします。Choose the TypeScript JSON Configuration File , and then click Add .

    Visual Studio によって tsconfig.json ファイルがプロジェクト ルートに追加されます。Visual Studio adds the tsconfig.json file to the project root. このファイルを使用して、TypeScript コンパイラのオプションを構成することができます。You can use this file to configure options for the TypeScript compiler.

  4. tsconfig.json を開き、更新して必要なコンパイラ オプションを設定します。Open tsconfig.json and update to set the compiler options that you want.

    シンプルな tsconfig.json ファイルの例を次に示します。The following is an example of a simple tsconfig.json file.

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

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

    • include によって、TypeScript (*.ts) ファイルを検索する場所をコンパイラに指示します。include tells the compiler where to find TypeScript (*.ts) files.
    • outDir オプションを使用して、TypeScript コンパイラによってトランスパイルされるプレーンな JavaScript ファイルの出力フォルダーを指定します。outDir option specifies the output folder for the plain JavaScript files that are transpiled by the TypeScript compiler.
    • sourceMap オプションによって、コンパイラが sourceMap ファイルを生成するかどうかを指定します。sourceMap option indicates whether the compiler generates sourceMap files.

    前述の構成では、TypeScript の構成に関する基本事項のみが説明されています。The previous configuration provides only a basic introduction to configuring TypeScript. 他のオプションについては、「tsconfig.json」を参照してください。For information on other options, see tsconfig.json.

アプリケーションのビルドBuild the application

  1. TypeScript ( .ts ) ファイルまたは TypeScript JSX ( .tsx ) ファイルをプロジェクトに追加してから、TypeScript コードを追加します。Add TypeScript ( .ts ) or TypeScript JSX ( .tsx ) files to your project, and then add TypeScript code. TypeScript のシンプルな例として、次をお使いください。For a simple example of TypeScript, use the following:

    let message: string = 'Hello World';
    console.log(message);
    
  2. package.json に、次のスクリプトを使用して Visual Studio の build コマンドと clean コマンドのサポートを追加します。In package.json , add support for Visual Studio build and clean commands using the following scripts.

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

    webpack などのサード パーティ製ツールを使用してビルドする必要がある場合は、 package.json ファイルにコマンド ライン ビルド スクリプトを追加できます。If you need to build using a third party tool like webpack, you can add a command-line build script to your package.json file:

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

    React での webpack と webpack 構成ファイルの使用例については、Node.js と React を使用した Web アプリの作成に関する記事をご覧ください。For an example of using webpack with React and a webpack configuration file, see Create a web app with Node.js and React.

    TypeScript での Vue.js の使用例については、Vue.js アプリケーションの作成に関する記事をご覧ください。For an example of using Vue.js with TypeScript, see Create a Vue.js application.

  3. スタートアップ ページ、Node.js ランタイムへのパス、アプリケーション ポート、またはランタイム引数などのオプションを構成する必要がある場合は、ソリューション エクスプローラーでプロジェクト ノードを右クリックし、 [プロパティ] を選択します。If you need to configure options such as the startup page, path to the Node.js runtime, application port, or runtime arguments, right-click the project node in Solution Explorer, and choose Properties .

    注意

    サード パーティ製ツールを構成する場合、 [ツール] > [オプション] > [プロジェクトおよびソリューション] > [Web パッケージ管理] > [外部 Web ツール] で構成したパスは、Node.js プロジェクトで使用されません。When configuring third-party tools, Node.js projects do not use the paths that are configured under Tools > Options > Projects and solutions > Web Package Management > External Web Tools . これらの設定は、他のプロジェクトの種類で使用されます。These settings are used for other project types.

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

    アプリは実行時に自動的にビルドされますが、ここではビルド処理中に何が起きるのかを確認します。Although the app builds automatically when you run it, we want to take a look at something that happens during the build process:

    ソース マップを生成した場合は、 outDir オプションで指定したフォルダーを開くと、生成された *.js ファイルと生成された *js.map ファイルが見つかります。If you generated source maps, open the folder specified in the outDir option and you find the generated *.js file(s) along with the generated *js.map file(s).

    ソース マップ ファイルはデバッグで必要となります。Source map files are required for debugging.

アプリケーションの実行Run the application

アプリをコンパイルした後に実行する手順については、初めての Node.js アプリの作成に関するページを参照してください。For instructions to run the app after you compile it, see Create your first Node.js app.

ビルド タスクの自動化Automate build tasks

Visual Studio のタスク ランナー エクスプローラーを使用して、npm や webpack などのサード パーティ製ツールのタスクを自動化することができます。You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and webpack.