Running and debugging TypeScript

With RustRover, you can run and debug TypeScript code.

Run and debug client-side TypeScript

Because browsers process only JavaScript, you have to compile your client-side 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.

Compile TypeScript into JavaScript

You can invoke compilation via a tsc script or configure a build process, for example, with webpack, babel, or another tool. Learn more from webpack with TypeScript and Babel with TypeScript.

Before you start

Press Ctrl+Alt+S to open settings and then select Languages & Frameworks | TypeScript.
Make sure the TypeScript Language Service checkbox is selected.

Create and configure tsconfig.json

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 TypeScript file in the active editor tab or all TypeScript files from the current project.

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

Create a tsconfig.json file

In the Project tool window (Alt+1) , 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.
To generate source maps during compilation, make sure the sourceMap property is set to true.
Optionally:
To override the default compilation scope, which is the entire project, add the files property and type the names of the files to process in the following format:
"files" : ["<file1.ts>","<file2.ts>"],

Configure the scope for tsconfig.json

You may need to apply different TypeScript configurations to different files in your project.

It is not a problem if you arrange your sources so that all the files in each folder should be processed according to the same configuration. In such case you only have to create a separate tsconfig.json for each folder.

However, if you want to apply different rules to the files that are stored in the same folder, you need to create several configuration files and configure scopes for them.

Create as many tsconfig*.json configuration files as you need.
Open the Settings dialog (Ctrl+Alt+S) , go to Editor | File Types, and make sure the names of all these files match the patterns from the Typescript config file name pattern list.
In each *tsconfig*.json, specify the files to be processed according to its settings:
- List the file names explicitly in the files field:
  "files" : ["<file1.ts>","<file2.ts>"],
  Learn more from TSConfig Reference: Files.
- In the include field, specify the file names or patterns:
  "include" : ["<pattern1>, <pattern2>"]
  Learn more from TSConfig Reference: Include.
- To skip some files whose names match the patterns listed in the include field, list their names or patterns in the exclude field:
  "exclude" : ["<pattern3>, <pattern4>"]
  Learn more from TSConfig Reference: Exclude.

Compile TypeScript code

You can invoke compilation via a tsc script or configure a build process, for example, with webpack, babel, or another tool. Learn more from webpack with TypeScript and Babel with TypeScript.

Compile TypeScript with a tsc script

In your package.json file, add the following line to the scripts section:
- tsc - to compile all files in the scope that is defined in tsconfig.json.
- tsc <path to a file> - to compile a specific file.
- tsc <glob pattern> - to compile all files that meet the pattern, for example, tsc production/src/*.ts.
Learn more from the TypeScript official website.
Click in the gutter next to the script and select Run '<script name>'.

Compilation errors are reported in the Run tool window.

Automatic compilation on changes

Open the Languages & Frameworks | TypeScript settings page Ctrl+Alt+S and select the Recompile on changes checkbox.

Run a client-side TypeScript application

Because browsers process only JavaScript, you have to compile your client-side TypeScript code before running it.

Run client-side TypeScript

Compile the TypeScript code into JavaScript.
In the editor, open the HTML file with a reference to the generated JavaScript file. This HTML file does not necessarily have to be the one that implements the starting page of the application.
Do one of the following:
- Choose View | Open in Browser from the main menu or press Alt+F2. Then select the desired browser from the list.
- Hover over the code to show the browser icons bar: . Click the icon that indicates the desired browser.

Debug client-side TypeScript

Because browsers process only JavaScript, you have to compile your client-side TypeScript code before debugging it.

During compilation, there can also be generated source maps that set correspondence between your TypeScript code and the JavaScript code that is actually executed. As a result, you can set breakpoints in your TypeScript code, launch the application, and then step through your original TypeScript code, thanks to generated sourcemaps.

If your application is running on the built-in RustRover server, refer to Running a client-side TypeScript application above, you can also debug it in the same way as JavaScript running on the built-in server.

Debug client-side TypeScript on the built-in server

Debug a TypeScript application running on an external web server

Most often, you may want to debug a client-side application running on an external development web server, for example, powered by Node.js.

Debug client-side TypeScript on an external server

Configure the built-in debugger as described in Configuring JavaScript debugger.
To enable source maps generation, open your tsconfig.json and set the sourceMap property to true, as described in Create a tsconfig.json file.
Configure and set breakpoints in the TypeScript code.
Run the application in the development mode. Often you need to run npm start for that.
Most often, at this stage TypeScript is compiled into JavaScript and source maps are generated. For more information, refer to Compile TypeScript into JavaScript.
When the development server is ready, copy the URL address at which the application is running in the browser - you will need to specify this URL address in the run/debug configuration.
Go to Run | Edit Configurations. Alternatively, select Edit Configurations from the Run widget on the toolbar.
In the Edit Configurations dialog that opens, click the Add button () on the toolbar and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL can be copied from the address bar of your browser as described in Step 3 above.
From the Run widget list on the toolbar, select the newly created configuration and click next to it. The URL address specified in the run configuration opens in the browser and the Debug tool window appears.
You may need to refresh the page in the browser to get the controls in the Debug tool window available.
In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

25 March 2026