#20 Including & Excluding Files | Configuring TypeScript Compiler | A Complete TypeScript Course

in the last lecture we learned how to manage our project folder with some typescript files as a typescript project and this allows us to compile all the typescript files in that project at once now before we proceed further let's have a quick look at this tsconfig dojon file this tsconfig Json file it is the most crucial file for managing the typescript project it essentially tells typescript how it should compile the typescript files in our typescript project so as you can see here we can set some compiler options here most of the things are commented but we will have a look at it in the lat lecture of this course so inside this compilers option we can set some options based on which the compiler should behave now after this compiler options we can also set some other options and these options which we are going to set here it is not going to affect the compiler Behavior instead here we are going to tell compiler like what files should be included for compilation what files should be excluded for compilation and so on so let's add a comma here and then let's add another property and the property which I want to use here is exclude so this exclude property it stores an array and inside this array you can specify all those files which should not be included in the compilation process So currently what happens is currently when the compiler runs it is going to compile all the typescript files which we have in this project folder and that's why you will see the output from all those three files here but let's say when the compiler runs I only want compiler to compile ab. TS as well as au. TS it should not comp file this config dots for that we can specify the path of config dots the relative path here in this array so here I can simply go ahead and say config dots okay so now if I save the changes and when the compiler will run you will still see config file called that's because we have already compiled this config dots earlier so it has generated this config.js file which we have attached in our index.html so let me go ahead and let me delete this file okay now let's save the changes and now you will see it says typescript is awesome which is coming from app.js and Au file called which is coming from .js so now when the files are getting compiled it is not generating config.js file anymore because config dots file is not included in the compilation process and since it is not included in the compilation process it is not getting compiled and that's why config.js file is not getting generated here and that's why we have this error because in the index.js sorry in the index.html we are also linking the config.js file so it is not able to find this config.js file and that's why we have this error okay so in this way if we want we can exclude a file from the compilation process using this exclude property which is an array and in this array we can specify all those files which we want to exclude from compilation process now when we use exclude we can also specify a wild card exclusion so for example let's say if any file we have in our project which ends with dev. TS we don't want to includeed in the compilation process for that we can say star. dev. TS okay and it should be included within double codes so now any file which ends with dodev dots it will not be included in the compilation process so this is wild card exclusion and we can also specify if there is any folder so for that we can say star/ and then start. dev. TS so here this simply means that any file which ends with dev. TS in any folder we don't want to include it in the compilation process so we can also do wild card exclusion like this now one use case where we use this exclude property to exclude any file from compilation process is when we want to exclude node modules folder so here I can specify nodecore modules folder this node modules folder is basically a folder which you will find in many node projects for example in angular project react project in your nodejs project you'll find this node modules folder and this node modules folder stores the files related to all the dependencies of your project and their dependencies so in the node modules folder if we have any typescript file any file which ends with TS we might not want to include it in the compilation process so for that we can specify this node modules folder name so in that case if we have any file in this node modules folder which ends with TS it will not be included in the compilation process okay now keep in mind that if you don't exclude node modules folder like this if you remove this in that case the node modules folder is set to be excluded anywh by default setting so you don't really need to add this option here but if you are using this exclude property then you must explicitly specify that you want to exclude this node modules folder from the compilation process because if you're using this exclude property and you're not specifying the node modules folder explicitly in that case any typescript file which you will have inside this node modules folder it will be included in the compilation process so if you don't use this exclude property at all in that case this node modules folder will be excluded from the compilation process by default but if you are using this exclude property then you must explicitly specify this node modules folder in the exclude array I hope you got the point beside excludes we also have another property called include and this is also an array and it just does the opposite of exclude so it allows you to specify which file should be included in the compilation process and anything that is not listed here will not be compiled so for example if we want to include only ab. TS so again these values should be string values and we want to include let's say config dots so only these two files will be now compiled by the typescript compiler because only these two files we have specified inside this include array so au. Ts that will be excluded from the compilation process if you save the changes you see now config file called is being displayed here and we can also see Au file called because this au. JS file it has been already created earlier when we compiled this au. TS so again let me go ahead and let me delete it and now let me again save the changes so again the typescript files will be compiled and now you will see only two messages typescript is awesome and config file called you will not see Au file called because now Au file au. TS file it has not been compiled and that's why you will not see au. JS file created here okay so using this in include property you can include all the files which you want to include in the compilation process here when we are using include we can also specify a folder path so let's say you have a folder called SRC and in this folder you have all the typescript files which you want to compile so you can also specify this SRC folder in that case whatever typescript file we will have inside this SRC folder those all will be included in the compilation process so you don't need to specify those files individually once you have specified the folder path whatever typescript file you will have inside this folder that will be included in the compilation process now let's say inside this Source folder you have four files and out of those four files there is also a file called test.ts and you don't want to include that test. CS in the compilation process so basically what we want is from this Source folder we have four files out of those four files we want to include three files in the compilation process but we want to exclude one file from the compilation process and that one file name is test.ts so we can specify the file path of that test. CS which we want to exclude from compilation process in the excludes array so here I can simply go ahead and I can say SRC SL test.ts so now this test.ts file which we have in inside the source folder it will be excluded from the compilation process then we also have another option called files and using this files option also we can specify what files do we want to include in our compilation process the difference between include and files is that when you're using include you can also specify a folder name but when you're using files property there you can can only specify the path of files you cannot specify a folder path you can only specify the relative path of the files which you want to include in the compilation process so this is the difference between files and include we can use files option in smaller projects where we have very few typescript files to compile but in larger project we mostly use include option because it also allows us to specify the folder path okay so these are the few options we can set for compilation process which files to include and which ones to exclude from the compilation we have many more other settings which we can set inside this TSC config.js file and we will talk more about them in our coming lectures this 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: 491

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

Id: Kn5N2o2e24A

Length: 11min 33sec (693 seconds)

Published: Sat Apr 20 2024