Sometimes latest new techs just pile up, and in the process of using them, we tend to forget the basics and foundations. It is good to go back and start from scratch to understand the foundation and basics.
Introduction:
Typescript is an additional layer to JS that adds type safety. It cannot compile on its own. So it needs a separate compiler to compile to JS before running it. tsc is the TS compiler that does that work.
But wait, then what the hell is ts-node?
Okay, till now we know that tsc is a compiler that compiles TS to JS to run the code. Till now there is no Node.js in action. If you want to use TS with Node.js, using tsc does not make sense. What we really want is just code in TS and let node handle everything. So, ts-node does that for us. We setup ts-node, and it will enable us to run Typescript directly in Node. Amazing, right?
tsc vs node-ts
If we were using tsc, we have to run tsc tsfile.ts command every time and then run the generated JS file.
If we use ts-node, we use ts-node tsfile.ts, and boom it will execute the code.
I am not going to write every step to make a project run with ts-node. I followed this steps form digitalocean. https://www.digitalocean.com/community/tutorials/typescript-running-typescript-ts-node
The steps above in the link did not work out of the box for me, it might happen to you too, so make sure:
- You have initialized a "tsconfig.json" file, I did that with
npx tsc --init. It just initializes a tsconfig.json file. - If it shows an error related to the --loader flag, use this option "scripts":
{ "start": "NODE_OPTIONS=\"-r ts-node/register --no-warnings\" node index.ts" }https://www.npmjs.com/package/ts-node#node-flags-and-other-tools
Debugging in vscode
To start debugging, we just need to update the launch.json. I took the code from this gist file.
{.
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"args": ["${relativeFile}"],
"runtimeArgs": ["--nolazy", "-r", "ts-node/register/transpile-only"],
"args": ["src/script.ts", "--example", "hello"],
"cwd": "${workspaceFolder}",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/index.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
Alternative
You can use tsx which seems to work out of the box unlike ts-node, which always has some difficulty setting up.
If you are just experimenting and digging up, understanding basics and foundations: make mistakes, give yourself time to learn and grow more.
Some FlashCard questions
I usually make flashcards for active recall. Here are some flashcard questions while doing this blog:
- What is TypeScript? How does it differ from JavaScript?
- What is the role of the tsc compiler? When is it used?
- What is ts-node? How does it differ from tsc?
- Why would you use ts-node over tsc during development?
- What is the purpose of the tsconfig.json file?
- ESModule vs Common JS Module?
- In Node.js, what is node_options and what is it used for?
- Are the changes made by node_options permanent?
- What is the "cross-env" package in Node and why use it even though the same functionality can be achieved using system tools like shell?
- Which JS engine is Node based upon?
Happy Coding, Happy Learning 🎉
Top comments (0)