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

Artem Diashkin
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

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!

Geek Culture

Proud to geek out.

Sign up for Geek Culture Hits

By Geek Culture

Subscribe to receive top 10 most read stories of Geek Culture — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

Geek Culture

A new tech publication by Start it up (https://medium.com/swlh).

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store