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

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
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.

After saving the configuration, you will be able to launch .ts
file that is currently active in the editor tab (Control+R
/⌃R):

Or debug you typescript files with setting debug Breakpoints:

🎉 Congratulations. Happy coding!
If you want to know more about running/debugging Typescript files, you can check here: