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\""  
   },
}