TypeScript and NodeJS: The Proper Setup!

hello it's getting kind of kind of close to Christmas can you tell well anyways that's that's not what I want to talk about today today I want to talk with you about how to set up typescript for node.js um it Bears a lot of potential typescript is really cool it speeds up your development process makes you make less errors it increases maintainability it just has a lot of advantages for your node.js project now to integrate typescript it's very useful to First understand how typescript works first the compiling and then the JavaScript behind it I'm going to explain all that in this video when I first learned those Concepts it was really interesting to me and I think I can share that interesting Behavior with you it's gonna be cool so let's get right into it and let's take a look at how to integrate typescript in node.js get started let's create a new folder so let's call it TS node demo and in here we're gonna go into vs code now the initializing commands we're going to run you could also run in the CMD so you could just say cdts node demo because essentially uh oh well same thing but you need to go to the desktop first and then run that um we're going to use the vs code terminal I just prefer that but it's the same thing so it doesn't really matter now to initialize our project we're going to say npm init Dash Y and dash Y is just going to mean um just accept all the default options so we're skipping the whole questionnaire and that we normally have to do with a package.json and also let's create an index.ts this is um that is going to be like our main server file and also we would probably want to change the main in here now um in here we can say console log123 and let's see what happens if we run that so node index.ts aha so it logs out one two three so the typescript file is working right so it's running the typescript so Josh what is this what is this video even about what are we doing here um well the thing is um if we take a look at what happens when we use actual typescript so cons at numbers and let's hope GitHub co-pilot will yes do some assistance for us and then we can add number one two um so in this case we're using actual typescript right we're using the um the specific types we're mentioning and then we're trying to use the function to add numbers now let's save that file and let's run the same thing again aha interesting so now it throws an error unexpected token colon and it points at this colon right here so essentially what node is trying to do is read this file but not only understands JavaScript it doesn't understand typescript so how do we get no to understand typescript and therefore you know code or whole node and maybe Express project in typescript well there is a command um that we need to use and that is npx tsc- init and what that command is going to do is generate a TS config for us now by default it's going to have some default values in here like um es2016 and common JS and we can we can take a look at exactly what happens um so we can run TSC which means typescript compile and then index.ts now what we're doing with this command is compiling the typescript we have in here and into normal JavaScript that node knows what to do with so when we run that command and you can see in index.js file was created in our project directory and then here there is the same code but in a different syntax so we can see VAR at number instead of const add number and we can see the types have been completely removed so this is a completely normal Javascript file that knows that node knows how to deal with so if we run the same file just with the dot JS extension node index.js aha node now knows what to do with it and we can console log this add number instead of just doing it without any purpose let's run that again and we can see the result of the add number whereas when when we run the index.ps um it doesn't know what to do so first off before being able to run the typescript we need to compile it now um doing it this way would be very time consuming right so each time we want to do that we have to say TSC index.ts and then run that JS file that's not really what we want to do so one thing um that is very very beneficial to do is create two folders first off and that's just what I personally like to do because I think it's better for larger projects and create one server and then not in the server but at the same level we want to create this folder now if you don't know this stands for distributable and essentially um you can I can show you so this folder meaning coding um essentially it's for production code so in here it says that this folder contains the minimized version of the source code um so essentially just the source code that's ready to run um optimized for production and to get the code in here instead of the you know root of the project whenever we compile we can go into the tsconfig because this is where we do that and then we can search for uh output well where is it output out there right here we can go for the alt directory and then here we can say um slash dist so this means whenever we run the compiler it's not going to put the files it compiles down into the root of the folder but instead into the this so we can say TSC server slash index dot yes remember we changed the directory so we need to mention that here and as you can see I'm at the root level nothing was created but oh in the this in the this nothing was created either um let me check why that is the case Okay so the reason it wasn't put in this simple mistake um instead of running a PSC server slash index.ts because then you'll notice it will put the file in the same directory which is not what we want um instead the only thing we need to run is simply TSC and because with that command we did previously the this one we are overwriting the output directory which is not what we want and when using just TSC it will read the alt der from the typescript config and then use the one we actually want which is the dist and if you've never seen what compile typescript code looks like well you know nothing nothing very surprising it's just a regular plain old JavaScript and I still found that very interesting the first time I tried it though and I remember experimenting um with Imports so for example if we were to say import FS from FS so the file system which is something we get by default and node now for that we also want the npm install the ad types slash node as def dependencies and that is going to solve the uh the the error that it doesn't know where the fs is coming from and then down here we could say fs.write file sync and right into test.txt and we are just writing test however we're not actually gonna run this um instead we're going to save and look like and look at what this looks like as typescript code so let's run TSC again and now it's going to compile the input Down To What We specified in the tsconfect.json so es 2016 and common JS Imports so that means if you go into index.js um interesting the import look at what import has become the import has turned into this like okay that is that is different so it's very very verbose about how we are importing something so it makes sure that really every browser understands um what we're trying to do we are defining the property exports es module value true so it's very verbose and then only here are we actually importing with this VAR that we've defined up here so every browser really understands what we're trying to do and then it changed the mfs.write file sync to FS1 a Content we've defined up here dot default dot write filesync so um this is the beauty of typescript um it compiles down to something that really every browser understands and not just the you know more modern ones and you can you can try changing some things up here so instead of common JS we want es um 2022 so very modern one and as you can see that also changes the import and so only the modern browsers that understand es2022 will also understand this import so I found that very interesting the first time I actually compiled you know typescript into JavaScript no um that would still be quite inconvenient to run right every time you'd have to run TSC and then node this slash index.js that is not really where what um cannot use import statement outside a module well it doesn't really matter I just want to show you what the import looks like we don't need to worry about that for now essentially um it would be quite cumbersome to always have to compile and then run the actual file so we don't want that so what we can do is go to the package.json and have a star script and say TSC and end so after we do that that is the syntax we use in the package.json we can see we can say nodes server and now we want the exist and then index.js that's what we call it and now we can say npm Run start that is going to compile and after that it's going to run the code so as you can see it compiles first then runs the code there are packages however that make this even more convenient but I wanted to really make sure before getting into those packages that you understand the process of what we need to do to actually run typescript in node.js so that means we are compiling the the stuff first so we are compiling typescript to JavaScript and then running the Javascript file and now that you understood that there's actually packages that do that for you but I think understanding the concept is very important so for example TS node is one package that is very popular and the way we use it is say npm install um wait what was it called again a TS node and we can install that as a def dependency we do not need that as an actual you know production dependency um and instead of having all this stuff with a disk directory and the double command that we have in the package.json instead we could say TS node and then server slash index dot TS and if you take a look at what TS node really is it's nothing different um so I remember somewhere it said it's just a pre-compile yeah it just in time transforms typescript into JavaScript enabling you to directly execute typescript on node.js without pre-compiling now pre-compiling is what we did with TSC right that is the pre-compiling and then running so um TS node does the same thing under the hood just without you knowing it and you don't need it this directory just automatically um runs it from different directories so you don't really notice what happens under the hood and that allows you with this npm package to directly execute typescript files so we can say npm Run start let's see what happens and as you can see um it does the same thing right remember when we pre-compiled first it was this right here and now it runs TS node server index.ts and this the same thing happens so we can run regular typescript um because first we are compiling it down to JavaScript and then running the JavaScript now um on one hand in the first approach we did that ourselves and then in the second one we let a npm package do that for us not everybody wants um to depend on a lot of npm packages I think this one is safe to depend upon that that is not a big problem and it's a very lightweight one so it doesn't really matter but the understanding what we're doing is very important for actually being able to successfully integrate typescript into node.js in my opinion so now after installing the package we can get rid of a lot of this stuff so we don't need the this folder anymore we can completely remove that and um yeah that's pretty much it so now we can whenever we want to run the server say npm Run start that's gonna do the pre-compiling and the running completely for us and then give us the desired output with actual typescript code okay I found that really interesting the first time I tried it so I wanted to share it with you I really hope you found it as interesting as I did thank you very much for watching I'll see you in the next video that was all I want to show you have a good one and until then bye bye

Channel: Josh tried coding

Views: 30,659

Keywords: typescript, nodejs, typescript nodejs, nodejs typescript, node typescript, typescript node, tutorial, nodejs typescript tutorial, beginner, introduction, project, josh tried coding, joshtriedcoding

Id: HvxYkugp55A

Length: 13min 48sec (828 seconds)

Published: Sun Dec 04 2022