Compile TypeScript code (Node.js)

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. For projects developed in Visual Studio 2019, we encourage you to use the TypeScript npm package for greater portability across different platforms and environments.

For ASP.NET Core projects, it is recommended that you use the NuGet package instead.

Add TypeScript support using npm

The TypeScript npm package adds TypeScript support. 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. Follow instructions to install the Node.js development workload and the Node.js runtime.

    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. Otherwise, use either a Node.js JavaScript template included with Visual Studio and follow instructions here, or use an Open Folder project.

  2. If your project doesn't already include it, install the TypeScript npm package.

    From Solution Explorer (right pane), open the package.json in the project root. The packages listed correspond to packages under the npm node in Solution Explorer. For more information, see Manage npm packages.

    For a Node.js project, you can install the TypeScript npm package using the command line or the IDE. 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.

    Check the npm option in the Output window to see package installation progress. The installed package shows up under the npm node in Solution Explorer.

  3. 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. Choose the TypeScript JSON Configuration File, and then click Add.

    Visual Studio adds the tsconfig.json file to the project root. You can use this file to configure options for the TypeScript compiler.

  4. Open tsconfig.json and update to set the compiler options that you want.

    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 tells the compiler where to find TypeScript (*.ts) files.
    • outDir option specifies the output folder for the plain JavaScript files that are transpiled by the TypeScript compiler.
    • sourceMap option indicates whether the compiler generates sourceMap files.

    The previous configuration provides only a basic introduction to configuring TypeScript. For information on other options, see tsconfig.json.

Build the application

  1. Add TypeScript (.ts) or TypeScript JSX (.tsx) files to your project, and then add TypeScript code. For a simple example of TypeScript, use the following:

    let message: string = 'Hello World';
    console.log(message);
    
  2. In package.json, add support for Visual Studio build and clean commands using the following scripts.

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

    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"
    }
    

    For an example of using webpack with React and a webpack configuration file, see Create a web app with Node.js and React.

    For an example of using Vue.js with TypeScript, see Create a Vue.js application.

  3. 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.

    Note

    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:

    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

For instructions to run the app after you compile it, see Create your first Node.js app.

Automate build tasks

You can use Task Runner Explorer in Visual Studio to help automate tasks for third-party tools like npm and webpack.