TypeScript in The Build Process 9 exercises
solution

Use tsc's Watch Mode to Automatically Compile TypeScript Files

Running tsc --watch is the solution to automating the TypeScript compilation process.

To see it in action, open the example.ts and example.js files side by side.

When you make changes to the example.ts file, such as adding a "Hello, World!" message, you'll notice that the changes are auto

Loading solution

Transcript

00:00 The solution here is really nice. Inside the proper directory here, I'm going to run tsc-watch. And now, if I look at this, it's saying starting compilation in watch mode. If I open up the example.ts and the example.js, you'll be able to see that when I make changes to the ts,

00:18 so I say hello world here, it automatically goes through to the example.js here. Now, this tsc watch mode is really, really nice because it's going to check my entire project for me too. So, for instance, I add in, let's say, a wrong thing here, or I say message number, for instance.

00:36 Then, if I save the file, it's going to catch up with me and it's going to say argument of type string is not assignable to parameter of type number. Look at this. So, this is really nice. Tsc watch gives you, basically, a way of checking your entire project

00:53 every time you make a change inside there. And so, if I change it back to message string, it's now going to work. And then, if I go over to my browser, I can see that when I refresh, I'm going to see hello world. So, tsc watch is a really critical tool to know about, not only because it means that you get to skip over

01:11 some parts of running tsc every time, but also because you can use it as a way to monitor the status of your entire project and make sure there are no errors across the whole thing.