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

tHeSiD
  • 4,587
  • 4
  • 29
  • 49
Alias D
  • 53
  • 1
  • 6
  • 1
    Where ever you are compiling your ts code, user `tsc -w` it sets the compiler in `watch mode` so everytime you save a file, the compiler restarts automatically – tHeSiD Jun 20 '20 at 09:35
  • yea this is what I tried but the terminal says the following: [15:09:01] Starting compilation 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 Jun 20 '20 at 09:41
  • Ok first thing, `tsc` only compiles 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 comment – tHeSiD Jun 20 '20 at 09:58
  • yes I do wanna automate this, please do tell. – Alias D Jun 20 '20 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 Jun 20 '20 at 10:50

2 Answers2

2

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\""  
   },
}
Wahab Shah
  • 2,066
  • 1
  • 14
  • 19
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:

ts-node-dev watch result

tHeSiD
  • 4,587
  • 4
  • 29
  • 49
  • Sure, `ts-node-dev` is a [node package](https://www.w3schools.com/nodejs/nodejs_npm.asp) which you install on your system. It is a package that will enable you to run typescript code. It is based on [ts-node](https://github.com/TypeStrong/ts-node) which is another node package that emulates the `node example.js` but instead for typescript, for your commandline. Read more about `ts-node-dev` [here](https://www.npmjs.com/package/ts-node-dev) – tHeSiD Jun 20 '20 at 13:12
  • and what does option --respawn do? – Alias D Jun 20 '20 at 13:57
  • Its like watch mode, basically `tsnd` starts a child process which executes your code so `--respawn` tells tsnd to restart the process or create the process again after if finds code changes. The process here is ts-node executing your files – tHeSiD Jun 20 '20 at 14:35