#19 Configuring TypeScript Compiler | Configuring TypeScript Compiler | A Complete TypeScript Course

in this lecture and in next few lectures we are going to have a high level look at typescript compiler so far what we have been doing is in order to compile a typescript file we have been using TSC command followed by the typescript file name which we want to compile right now that approach of course works but that's not feasible for bigger project where we have multiple types script files and when we want to compile them all at once and also currently we have to comp compile the typescript file every time we make some changes to it in order to see the result right so we going to do some configuration for our typescript compiler and we will try to solve these two problems in this lecture so the first thing which we want to do is we don't want to compile our typescript files manually every time we make changes in our typescript code instead what we want is we want to configure typescript compiler in such a way that every time we make changes and save typescript file the compiler should automatically run and compile the file and to do that all we have to do is we have to compile our typescript code in watch mode Let's understand this practically so here we have our app. TS file so this is a new project which I have created and just like in our last project we have an index.html file here the style.css file and appts file and inside this app .ts file we writing all our typescript code So currently if I save the changes and in order to execute this code in browser first we need to compile this code for that we use TSC command followed by the name of the file which is app. TS if I press enter this command will compile this app. TS file and now you can see the result in the console if I change this message here and if I save the change changes this file will not get compiled automatically again we have to go ahead and manually compile this file by again running this TSC command followed by the name of the file which we want to compile and now only the file will be compiled and we can see the changes so what we want is instead of compiling the file every time we make changes in our typescript file what we want is whenever we make change in our typescript file and as soon as we save it the compiler should run automatically and it should automatically compile the code for that all we need to do is we need to run this TSC command with watch mode enabled for that all we have to do is we have to run this TSC command but when we are running this TSC command at that time we can enable the watch mode so for example we can say TSC space the file which we want to compile space hyphen hyphen watch okay or we can also type hyphen W so it will enable the watch mode so we only need to run this command once and after that every time we make changes in our file in this case when we make changes in the app. TS file and as soon as we save it since the watch mode is enabled the compiler will automatically compile that file let's see that let's run this command so you see now the watch mode process is running so you see we are not exited from that process that process is still running and what this will do is now whenever we will do some changes in our file this watch mode will keep an eye of that change and as soon as we save that change it will run the compiler automatically let's see that so here I'll change this message and now you will notice that as soon as I save my change the compiler runs again and you see we can see the new output so we did not have to run the compiler manually as soon as we saved the file the compiler will run automatically and we can see the changes we can see the changed result in the browser so this is what watch mode does watch mode keeps an eye on the file which we used in the command and whenever something changes in that file and it is saved watch mode will automatically run the typescript compiler we don't have to do it manually now keep in mind that watch mode will work as that watch mode process is running if you exit this process by pressing contrl C in that case watch mode process has been killed so in that case every time you will change your file and save it since the watch mode process is no more running the compiler will not run automatically so this is very important to understand that as as long as the watch mode process is running as you can see in the terminal till that time only the watch mode will work and every time you will save your file the watch mode will call the compiler to recompile that file all right now let's talk about another configuration so when you're working in large projects you will not have a single typescript file currently in our project we have only one typescript file app. TS but when you're working in a large project you might have multiple type script files which you want to compile so let's go to vs code and here what we will do is we will add two more types script files so maybe the first one I'll call as config dots in here let me write a console.log statement and here we will simply say config file called all right let's save this file and let's close it then I'll also so create one more file let's say .ts and here also I will simply add a console.log statement and there let's say Au file called this is just for demo purpose let's save this file and let's also close this one and now let's go ahead and let's open index.html and there just like how we are linking this app.js file in our HTML in the same way we are also going to link config.js and .js so here I'm going to link config.js and here I'm going to link .js now you might say that we don't have config.js or .js we have config dots au. TS but we do not have config.js and AU .js well when these two files will be compiled we know that it is going to give us some JavaScript code and that JavaScript code will be available in the Javascript file so once these two files will be compiled it is going to generate ajs file with the same name right so now what we need to do is we want to compile all these three TS files which we have in our project earlier we had only one TS file this app. TS but now we have three TS files and we want to compile all these 3 TS files so let me kill this watch mode process by pressing contrl C let me also clear the terminal now if we run TSC command followed by a file name for example config dots in this case it is only going to compile config dots if I say app. TS it will only compile app. TS so what we want is instead of compiling a single file we want to compile all the typescript files which we have in our project and we can do that and for that we need to tell typescript compiler that we want to compile all the typescript files in this project so whatever types script file we have in this project we want to compile them all and for that what we need to do is we need to run a command so here in the terminal we are going to run TSC hyphen hyphen init command and this command will initialize this project you know this folder this project folder as a typescript project that means this command will tell typescript compiler that everything in this folder where we are running this command should be managed by typescript we are running this command in this folder typescript configuration folder which is our project folder name so whatever file whatever typescript file we will have inside this folder it should be managed by typescript so let's go ahead and let's run this command and the command has been executed and now if I go to our project folder there you will notice that a new file called tsconfig Json file has been created this file it contains all the configurations related to typescript compiler for now as you will see most of the things in this file it is commented but we will come to it later and enable some compiler configurations according to our need in our coming lectures so for now let's not worry about this TSC config.js file let me also close this index.html file and now when we run this TSC init command when this TS config.js file has been generated now the types script compiler will compile all the typescript files in our project folder and again to compile the typescript files we need to run TSC command but this time we don't need to specify any specific file name like we were doing earlier earlier in order to run app. TS after this TSC command we were specifying the file name but now since we want to compile all the typescript files in our project folder all the typescript files which we have inside this typescript configuration folder we simply need to run this TSC command we don't need to specify any file name so let's go ahead and let's run this command so this command has been run if I go to our folder structure there you will see that app.js .js and config.js files have also been created and you can also see the results logged here so typescript is awesome config file called or file called so now all the three TS files are being compiled by the typescript compiler now you can also run this TSC command in watch mode so again for that you can say TSC space hyphen hyphen watch or you can say hyphen W and now when you will run this command the watch mode will be enabled and the watch mode process will be running in the background and as long as that watch mode process is running whenever you do some changes in any of the typescript files and and when you save it it will call the typescript compiler and it will compile all the typescript files again so you don't need to compile your files manually by running TSC command so in this lecture we saw some simple configurations which we can do for the typescript compiler like compiling the typescript file whenever the file is changed and saved and also how to compile multiple typescript files in the project let's do some more configuration for our typescript compiler in our coming lectures there is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 581

Keywords: typescript, data types, configuration, classes, objects, ES6 features, decorators, tupescript tutorial, complete typescript course

Id: QJSi_OnLYw4

Length: 12min 18sec (738 seconds)

Published: Fri Apr 19 2024