Hot reloading in typescript code in VS Code

Question

// 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?

Answer 1

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

This Link will help hoepfully

You can start compiler using npm

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

Answer 2

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 command line

After installation

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

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

or simply tsnd --respawn .\HelloWorld.ts

Result: