🚀TS Compiler & Config

TS compiler and its configuration

Watch mode

Currently, we compile a TS file into JS file by running the command

tsc app.ts // this creates app.js file

and we need to run this command after every change we make in app.ts file. Also we need to refresh the browser to load the new changes.

To avoid that, we can enter watch mode. We can tell TS that whenever I make changes keep updating that so I don't have to re-run above command.

We can do this by this command

tsc app.ts --watch 

OR

tsc app.ts -w

But the downside with this is, we still have to target this specific file and run watch mode on that (app.ts in this case). This will not be a good solution if we are working on multiple files at the same time.

Compiling multiple ts files

If there are multiple TS files then it's better to have a configuration and manage how it has to be run. We can create such a config by running

tsc --init // this will create tsconfig.json

This will create tsconfig.json file in root of the project. Now in that file, we have bunch of configs, but we can observe the main thing that is, if we now run

tsc // in root of the project

then it will compile all Ts files in this project. Meaning, for each TS file, an updated JS file will be created.

Now if you want a watch mode on any or all of the TS files so that you don't have to stop and start the server, then do

tsc --watch
OR 
tsc -w

Include and Exclude files

We can include or exclude certain TS files from compilation.

Even if you don't exclude node_modules, that will be the default behaviour. You don't have to specify that.

If you don't add exclude array to tsconfig.json, then node_modules will be automagically excluded. If you do add it, then you should deliberately specify to exclude node_modules.

Compiler Options

tsconfig.json has compilerOptions object where you can specify different options. Let's see the important ones.

Compilation Target

target specifies, for which JS version we need to compile the TS code. It's set to es5 by default. If set to es6, then TS will compile (convert) the TS code to es6 version of JS. In this case (default case), it compiles es5 version of JS code.

Let's ignore module option now and will come back to it later once we learn about other features.

lib

lib is an option to specify which default objects and features TS knows (things like working with the DOM). Let's say we have a button in index.html

So we can add a document like this in TS. The question is, how does TS know about this document (it doesn't add a warning red line under document). I mean, document is related to browser's JS. This TS we are writing could or couldn't be for browser (it could be for node as well where document doesn't come into picture). How does TS know about this document then?

But what about document? TS doesn't complain about not knowing the document keyword. How does TS know about document? If it was node, then document could be unknown as node doesn't know about the document, as document is only related to browser.

All of these document, querySelector, button's addEventListener are known to TS because of lib. We haven't even set the lib yet in tsconfig.json, but some defaults are assumed if it's not set.

If it's not set then the defaults are assumed by target. If target is set to es6 for example, then lib takes from that and now lib knows all of es6 syntax like Map etc.

If we set lib : [], then TS knows nothing. We need to add everything to this array.

sourceMap

This is a very useful option for debugging. Let's say we have TS files compiled to JS. We now have complex JS file which is compiled by TS file and the browser only could see JS file (in developer tools application tab). What if we need to add a breakpoint on TS file, it's better to see this TS files directly in browser's application tab. sourceMap helps here.

Enabling this option, we can now see the TS files directly in browser

outDir

rootDir

No emit on Error

If any TS file fails (have errors), then no JS files will be created (even if other TS files don't have errors) if noEmitOnError is set to true.

Strict option

noImplicitAny

If strict is set true or noImplicityAny set true, then TS complains about any type. If we don't specify the type of parameter and leave it as is, it complains like this.

StrictNullChecks

strictNullChecks tell TS to be pretty strict about the how we access and work with values that can potentially hold null values. button might be null here if qs doesn't exist.

One cheap work around is the exclamation mark ! This tells TS that the developer knows there will be a value eventually.

In another scenario if we don't know it works for sure and if we hope that it works then its better to wrap the code that might fail in if check like this

noUnusedLocals

noUnused parameters

Same as unusedLocales but for un used parameters in a function (if param is defined but not used) then TS complains about it.

noImplicit returns

Debugging with VSCode

Enable sourceMap option (set sourceMap to true in tsconfig.json file). Place breakpoints in the code and click on Run (at top in VSCode in menu bar)-> Start debugging

Useful resources

Ts config

Documentation - What is a tsconfig.jsontypescriptlang

Compiler config docs

Documentation - tsc CLI Optionstypescriptlang

VS Code TS Debugging

https://code.visualstudio.com/docs/typescript/typescript-debuggingcode.visualstudio.com