Compile TypeScript code using npm

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. Check if you need to install any development workload for Visual Studio or the Node.js runtime.

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.

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

3. If you need to configure build and deployment options such as the app URL or runtime commands, right-click the project node in Solution Explorer, and choose Properties.

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

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