IntelliJ IDEA 2020.2 Help

Compiling TypeScript into JavaScript

Because browsers and Node.js process only JavaScript, you have to compile your TypeScript code before running or debugging it.

Compilation can also produce source maps that set correspondence between your TypeScript code and the JavaScript code that is actually executed.

IntelliJ IDEA comes with a built-in TypeScript compiler. By default, it outputs generated JavaScript files and sourcemaps next to the TypeScript file.

Compilation is invoked with the Compile button on the toolbar of the TypeScript tool window (View | Tool Windows | TypeScript) as described in Compile TypeScript code below.

Open the TypeScript tool window and compile your code

The errors that are detected during compilation are listed in the Compile errors. This list is not affected by changes you make to your code and is updated only when you invoke compilation manually again.

When you have just opened the TypeScript tool window, you cannot see the Compile errors tab in it. The tab shows up only after the first manual compilation with Compile all button.

Before you start

Open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | TypeScript, and make sure the TypeScript Language Service checkbox is selected.

    Create a tsconfig.json file

    By default, the built-in compiler does not create source maps that will let you step through your TypeScript code during a debugging session. The compiler also by default processes either the currently opened TypeScript file or all TypeScript files from the scope selected in the Compile Scope field on the TypeScript page as described in TypeScript Language Service.

    With a tsconfig.json file, you can modify this default behavior to generate source maps and compile only files from a custom scope.

    1. In the Project tool window, select the folder where your TypeScript code is (most often it is the project root folder) and then select New | tsconfig.json File from the context menu.

    2. To generate source maps during compilation, make sure the sourceMap property is set to true.

    3. Optionally:

      To override the default compilation scope, add the files property and type the names of files to process in the following format:

      "files" : ["<file1.ts>","<file2.ts>"],

    Compile TypeScript code

    • To compile your code manually, switch to the TypeScript tool window (View | Tool Windows | TypeScript) and do one of the following:

      • To compile the TypeScript code of the entire application, in the TypeScript tool window, click the Compile button, and then select Compile All from the list.

        TypeScript: monitor compilation errors
      • To compile one file, open it in the editor, click the Compile button, and then select the path to the file from the list.

    • To compile a file automatically every time it is changed, open the Settings/Preferences dialog Ctrl+Alt+S, go to Languages and Frameworks | TypeScript, and select the Recompile on changes checkbox.

    • To compile files from a custom scope, make sure they are listed in the files property of your tsconfig.json as described above. In the TypeScript tool window, click the Compile button and select the path to tsconfig.json.

    Alternatively, you can configure a build process, for example, with webpack, babel, or another tool.

    Last modified: 19 August 2020