In this video, we will configure a TS project
file. Its time to get back to the tsconfig.json
file which we had created while setting up the project. Now the tsconfig.json file is just a regular
json file, this file also has content in form of key value pairs, just like any other json
file. these store information about how our project
should be compiled. So we dont have to add the compiler options
again and again while we run a compiler. we can even specify the list of files to be
included or excluded while we compile a project. Best of all, the TS project files support
configuration inheritence. this means, in a large project, we can create
a tsconfig file at the root of the project which will hold the default configuration
options we want to apply to our project. Whereas we can have a separate TS project
files in different folders in the project. For eg, like we can have one here in the app
folder. this will selectively override or add to the
options in the root project file. we will see how to set this up in a few minutes. Let me show you the list of compiler options
available to us from the TS official webpage. in the docs tab, if you move further down
to Project Configuration Section, here is tsc CLI option. In this, you can find the alphabetical list
of all available options. Here you can see, that we have a compiler
option --help, which gives us the local information for help in the CLI. Let's move to vscode and see this in action. In the terminal, when I type tsc -h and hit
enter, it gives me the list of all available compiler
options. So this was about our compiler options. Coming back to the tsconfig.json file, we
had created this file using the command tsc --init. if you want, you can even remove this entire
code and write the only options which you need. But we will stick to using the file by commenting
out the options which we don't need and uncomment the options that we need. We made a few updates in the 1st lesson. Will do some more now. The first we will see is this target option. This specifies the version of JavaScript which
will be output by the TypeScript compiler. ES2016 is widely supported by browsers, so
we will leave it as it is. Next, this compiler option module was commented
out in the earlier lesson. Going further down, here we have the source
map option. This was enabled in the ealier lesson. Next i will uncomment outDir option. This specifies the outpur directory in which
the compiler should save the compiled JS file. I will set it to a folder name js. It doesn't exist yet, but you'll see how the
compiler creates this for us. Next I will uncomment the strict option. it will enable all strict type‑checking
options. this is helpful in pointing out potential
errors in our code. You will see the effect of this soon. We have another compiler option here, esModuleInterop. This is related to modules. I'll turn it off for now, at the end of this file, I will add the watch
option. This leaves the compiler running so that it
can automatically recompile source files as they're saved. this saves a lot of time during development. Add a comma here after the previous option. And we are good with the watch option. This curly brace marks the end of the "compilerOptions"
object. There are other things we can specify inside
this tsconfig file. that was it for config.json file for now. since we have the outDir as the js folder,
we no longer need the main.js file which was created earlier. I will delete it for now. from the terminal, we will now compile our
project. We don't have to run the compiler from the
directory which contains the ts config file. The compiler will look for the file in the
current directory. If it doesn't find one, it will move up the
directory hierarchy looking for one. SO here we are in the QuickMathApp, and not
the app directory We are using the configuration file now, so
just type tsc and enter. The compiler is running on the watch mode,
obeying the configuration option we had set. Here we have got an error when we turned the
strict option to true. It says Object is possibly null. If they are null at runtime, our app can blow
up in the browser. For this demo, we know that the **messages**
element and the **startGame** elements exist in the HTML. I will quickly resolve this by adding a not
null assertion operator here. I will speak more about the strict option
later in this course. So as I added the operator, the code got recompiled
and you can see the errors disappear in the terminal. We also have a js folder here, for the JS
output file and the source map file. To use the new compiled js file, we need to
update the script tag in the index.html file. I will minimize the terminal. and in the index.html file, I will update
the script location to use my main.js file in my js folder
Start the server. open a new terminal. npm start. In the Chrome Developer Tools, in the Sources
tab, we can see all the js files. and here is the main.ts file. In this main.ts file, when I add a breakpoint
here, on line no. 4, and hit the start game button. You see, the browser is executing the JS file,
but I am adding a breakpoint in the TS file. when I hit the start game button, The debugger
stops at this breakpoint. Now, you can use the Chrome debugger tools
to inspect all the code. for now, we'll just click the continue button
and allow the code to finish running. Here's the message on the page. So, we have a working project configuration
file. we are able to debug our code in the browser. Next, we will see how can we use multiple
configuration files to control more precisely how files in a particular directory are compiled.
