Edit

Compile TypeScript code (Node.js)

  • Article

Use the TypeScript npm package to add TypeScript support to projects based on the JavaScript Project System (JSPS), or .esproj. Starting in Visual Studio 2019, it is recommended that you use the npm package instead of the TypeScript SDK. The TypeScript npm package provides greater portability across different platforms and environments.

Important

For ASP.NET Core projects, use the NuGet package instead of npm to add TypeScript support.

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 a simple Visual Studio integration, create your project using one of the Node.js TypeScript templates, such as the Blank Node.js Web Application template. Else, 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.json 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.

    If you don't see all the item templates, choose Show All Templates, and then choose the item template.

    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.

    An example of a simple tsconfig.json file follows.

    {
  "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. A simple example of TypeScript follows:

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

    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 don't 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.

    The app builds automatically when you run it. However, the following might occur 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 a Node.js and Express 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.

Related content

Properties, React, Angular, Vue