Here’s how it works: let’s say you have a file called `my-app.ts` with some TypeScript code inside (don’t worry if you don’t know what that means). You open up your terminal or command prompt and run the following command:
bash
# This script assumes that you have already installed typescript using npm or yarn
# The "npx" command is used to run a package without installing it globally
# The "tsc" command is used to compile TypeScript code into JavaScript
# The "--watch" flag is used to continuously watch for changes in the code and recompile it
# The "yarn watch" command can also be used if it is set up in a package.json file
#!/bin/bash
npx tsc --watch my-app.ts # This command will continuously watch for changes in the "my-app.ts" file and recompile it using typescript
# If you have set up "watch" in your package.json file, you can simply use "yarn watch" instead of "npx tsc --watch"
This tells TypeScript to start watching for changes in your code, and whenever it detects any updates (like adding a new line of code), it will automatically compile the code and run some tests on it to make sure everything is working as expected. If there are any errors or warnings, you’ll see them printed out in real-time so you can fix them right away.
Here’s an example: let’s say your `my-app.ts` file looks like this:
// This is a comment that explains what the code does
const myVariable: string = "hello world"; // This line of code declares a variable called 'myVariable' and assigns a string value to it
console.log(myVariable); // This line of code prints out the contents of the 'myVariable' variable in the console
If you run `npx tsc –watch`, TypeScript will automatically compile this file and print out something like:
# This script is used to automatically compile a TypeScript file using the "tsc --watch" command.
# It will print out the result of the compilation and any errors that may occur.
# Run the "tsc --watch" command to automatically compile the TypeScript file.
npx tsc --watch
# The following is an example of the output that may be seen when running the "tsc --watch" command.
# It shows the number of files that were changed, skipped, and added during the compilation process.
# It also displays the time it took to complete the compilation.
Compiling...
SUCCESS: 1 file changed, 0 files skipped, 0 new files (0.396s)
# If there are any errors during the compilation process, they will be displayed here.
# In this example, there is an error on line 2 of the TypeScript file.
# The error message indicates that the name "console" cannot be found and suggests installing type definitions for node.
# It also provides a command to run in order to install the necessary type definitions.
my-app.ts:2:7 error TS2304: Cannot find name 'console'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then run again with `tsc`.
This tells us that there’s an issue with the code on line 2 (which is where we called `console.log()`) because TypeScript doesn’t know what `console` is. To fix this, we can either add a type definition for Node.js using `npm i –save-dev @types/node`, or we can change our code to use an alternative logging library that TypeScript knows about (like `tslog`).
Hopefully that helps clarify how “Typescript Watch Mode” works!