TypeScript Tutorial #7 - Better Workflow & tsconfig

okay they're my friends now so far when we've been creating typescript we've done it in one type script file right here called sandbox and when we compile it to JavaScript we get one output file now that's fine for our case and learning but when you're creating a project that's a bit more complex you might have several typescript files several JavaScript files or the files as well and typically you don't always want them mixed together you might want to separate them into different folders maybe a folder for all of our source files where we write our typescript and a folder for all of the files that were then going to deploy at the end to some kind of web server so they're not mixed together so typically you'll see something like this in a project structure we'd maybe have a folder called public which is where all of the final public files will go which we deploy to the Internet to some kind of web server at the end and that would be things like this index file the final JavaScript the compiled JavaScript and maybe the CSS as well and we'd also have another folder called source and that would be where all of our source code goes like the typescript files the stuff we don't need to deploy to a web server at the end so this is a more typical workflow and now we're keeping all of these public files separate from our source files and it's just easier to maintain that way the trouble is now if we try to compile this by saying TS c and then it's inside the source folder forward slash sandbox TS now it's going to compile that and place it inside the source folder as well so then we'd have to move it inside to the public and we don't always want to do that so there is an easier way to manage this in a project structure and that is to use a command down here to say TS c then double dash in it and this is going to initialize this config file for us so if we go inside here this is all of our typescript compiling configuration options and there's a lot of different things like the target this is going to be the output of the JavaScript right here right now we're saying we want the output to be atma script specification 5 but it could be es6 if you wanted it to be then we have this one the module using command J s we'll come to that later low other things as well the one I'm concerned about at the minute is this root directory right here so I'm going to uncomment that and this should be forward slash source so we're saying all of our root directory files are going to be inside this source folder and then the out directory is going to be inside the public folder so this should be where everything inside this root directory is compiled to and placed right so that's all there is to it I'm gonna save that now I don't need to say TSC and then go into the source folder and then say sandbox now I've already said that these things inside source should be compiled into the stuff inside public so now if I say TSC and that's it it's going to look inside this file right here compile it down and put it out into the public folder right here so if I say now console.log test and save it now if I run TSC and by the way we can add on the watch flag right here if we wanted to and it's going to watch all of the files not just one of them this time all of them and whenever we save it it's going to compile them automatically so if I go to sandbox now we can see console dot log test ok now if I create another file in here which I'm going to call test dot 2 TS and inside here i'll say console log and testing 1 2 3 and if i save this now again it's going to compile this down for me because anything inside the source file now is going to end up inside the public folder and we have this test javascript file now as well now this is good but the trouble is if we ever create a typescript file somewhere else so let me say app dot CS right here this is outside of the source folder and without me even creating any code inside it it's automatically locked at this and compiled it down into an app dot JS file but I don't want anything outside of the source folder to be inside this public folder right here now I thought we added is to say okay only look inside the source folder but no that's not the case we're saying this should be anything inside the source folder should be in the root directory compiled to the public so it doesn't then it creates a fold it in here called source and then inside their sandbox das it looks what's inside here and just places them directly inside the public folder so that's why we say that bots to eliminate this kind of behavior where it compiles all of this stuff as well we need to go down here and add something on to the end and that is going to be an include property and right here this is going to be an array and by the way these things to be in quotes like that double quotes as well and inside here we're gonna say in double quotes in an array that only include files inside the source folder so now it's going to look at this and say okay I'm only going to compile things inside the source folder not anything else so now if I delete this and I'm gonna delete it from over here as well and I'm gonna save this now now if I come outside here and create a new file called app dot es now it doesn't compile that down into an app J's file inside the public folder and likewise if I add something in here consult that log hello and save it it's not going to compile this down automatically but it still will compile things down here automatically when we edit them and save we can see now over here in sandbox this is now Mario and I'll do the same for tests so testing one two three four this time save it and go to test KS and now this is updated as well so this is a much better workflow for slightly more complex projects now there are many other options inside this config file or right here but I'm not going to go through all of those options right now and we'll leave a link note to the documentation about them below and you can read about them but now at least we have our config file set up and we can just run TSC down here if i open up the terminal what we do now is just run TSC and space - watch and that is going to watch all of our typescript files inside the source folder and compile them automatically whenever we save them

Channel: The Net Ninja

Views: 48,508

Keywords: typescript, typescript tutorial, typescript vs javascript, ts, ts vs js, typescript for beginners, tutorial, tutorial for beginners, typescript tutorial for beginners, what is typescript, typescript basics, install typescript

Id: Y4IiQY9dNRA

Length: 6min 50sec (410 seconds)

Published: Wed May 13 2020