How to Run and Debug a Single TypeScript File in WebStorm IDE

Nov 21, 2020 · 4 min read

Let’s take a look at several ways of how you could run a single Typescript file in the WebStorm IDE.

What will be covered in this article:

The easiest way (without installing the npm package)
Launching file with the use of the script
Creating “Run Active” Configuration

Prerequisites

For running our Typescript files, we will be using the ts-node npm package. In some scenarios, you will not be needed to install the package locally

ts-node

TypeScript execution environment and REPL for node.js, with source map support

www.npmjs.com

The easiest way

If you need to run one file and see the results, you don’t need to add ts-node to your dev dependencies.

Let’s take a look at the simple example: currently, we have a single .ts file in our project examples/User.ts .

After running this command in your terminal…

npx ts-node examples/User.ts

…you will see the result:

⚠️ NOTE: If ts-node is not installed —> it will be downloaded, and it will be downloaded each time you run the command.

Launching file with the use of the script

For these purposes, we will need to add ts-node into our dev dependencies:

yarn add ts-node -D

After adding ts-node to our local packages, we will add an “example” script into the package.json file:

"example": "ts-node examples/User.ts",

You can run this script by using the terminal:

yarn run example

Or you can use an IDE “Run” icon:

After running the “example” script with the use of a “Run” icon, it will be added to the IDE Configuration ⚠️ but not saved:

You can save it just by clicking Save ‘example’ Configuration:

After saving, you can run your script by clicking the “Run” button or by pressing Control + R (⌃R):

⚠️ NOTE: You can open Run Context menu with all your saved configs by pressing Control+Option+R (⌃+⌥+R):

Creating “Run Active” Configuration

And the most powerful and effective way to run TS files is to create a Run Active Configuration.

After adding this configuration, WebStorm will always launch the file in the active editor tab. Let’s see how it can be done.

First, open the “Edit Configuration” tab:

Or you can open it by selecting it from the app’s menu:

After that Run/Debug Configuration window will open.

Add new Node.js Configuration by pressing + icon:

Now we will need to feel our Node.js Configuration fields:

Node parameters: --require ts-node/register
JavaScript file: $FilePathRelativeToProjectRoot$
Application parameters (optionally): --project tsconfig.json

⚠️ NOTE: This configuration will be saved ONLY in your current project. To solve this issue you can create your own template. But, I must warn you, new template will be used for all your Node.js file, even files with .js extension, so be carefull.