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
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
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
"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
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:
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
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 (
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: