// Immediately invoked function Expression (IIFE_)

var message= "Hello World";


(function pro(msg: string): void{
    console.log(`The message is: ${msg}!`);
})(message);

Above is the code I wrote in VS code using typescript. I read about this concept of hot-reloading online wherein you can basically make changes to part of your code and see changes to it without having to reload it from the start point. I want to be able to do this with a very simple program made in TypeScript using VSCode.

What i want is that i make change in my code for e.g. I change the text inside console.log() function and the result is immediately reflected in the terminal without me having to re-transpile the TS code into JS

Can someone tell me what am I missing since I don't know how to proceed, what settings do I goto to start this hot reloading?

// Immediately invoked function Expression (IIFE_)

var message= "Hello World";


(function pro(msg: string): void{
    console.log(`The message is: ${msg}!`);
})(message);

Above is the code I wrote in VS code using typescript. I read about this concept of hot-reloading online wherein you can basically make changes to part of your code and see changes to it without having to reload it from the start point. I want to be able to do this with a very simple program made in TypeScript using VSCode.

What i want is that i make change in my code for e.g. I change the text inside console.log() function and the result is immediately reflected in the terminal without me having to re-transpile the TS code into JS

Can someone tell me what am I missing since I don't know how to proceed, what settings do I goto to start this hot reloading?

• javascript
• typescript
• visual-studio-code
• reloading

• 1 Where ever you are piling your ts code, user tsc -w it sets the piler in watch mode so everytime you save a file, the piler restarts automatically – tHeSiD Commented Jun 20, 2020 at 9:35
• yea this is what I tried but the terminal says the following: [15:09:01] Starting pilation in watch mode... [15:09:04] Found 0 errors. Watching for file changes. what do I do now? I make changes to consol.log() 's text but no change in output, infact there is no output in the first place when i do tsc -w HelloWorld.ts – Alias D Commented Jun 20, 2020 at 9:41
• Ok first thing, tsc only piles the typescript code to javascript. You have to then execute that javascript on your own. if you do a tsc HelloWorld.ts it will generate an HelloWorld.js file and you need to execute it using node HelloWorld.js if you want to auto mate this let me know as its too long for this ment – tHeSiD Commented Jun 20, 2020 at 9:58
• yes I do wanna automate this, please do tell. – Alias D Commented Jun 20, 2020 at 10:15
• since there was already a ts-watch related ans, I added a ts-node-dev related ans, its easier for starters – tHeSiD Commented Jun 20, 2020 at 10:50

2 Answers 2

using tsc --watch just repiles the files and don’t run them. So to run it another package is used ts-watch which start piler in watch mode observes the output and runs the mand.

This Link will help hoepfully

You can start piler using npm

{
  "scripts": {  
      "start": "tsc-watch --onsuccess \"node dist/index.js\""  
   },
}

Since you haven't used any sort of package management and looks like you are just starting out

You can install ts-node-dev package globally

npm install -g ts-node-dev

Then you will be able to run ts-node-dev from you mand line

After installation

You can run this mand in the folder where you are writing your code

ts-node-dev --respawn .\HelloWorld.ts

or simply tsnd --respawn .\HelloWorld.ts

Result: