TypeScript Setup With Node & Express

[Music] hey what's going on guys so in this video I'm going to show you how to create a workflow where you can use typescript on your back end with nodejs and express now a lot of you might have heard of Ness Jas which I actually did a crash course on and it's a it's a back-end framework built on top of Express that does use typescript however it's very high level it's very similar to angular in the way that it's structured and the way that you write your code the syntax and all that so if you don't don't feel like using something like that and you just want simple Express with typescript along with node Mon I'm gonna go ahead and show you how to set that up we'll also talked a little bit about typescript basically if you don't know what it is I'm sure most of you do but if you don't it's a superset of JavaScript meaning it includes everything that javascript includes with some additional features including static type checking so you can basically you know say you want a certain variable to hold a string or a number or a boolean your function returns stuff like that you can add interfaces namespaces I do have a crash course on typescript it is a few years old but it does have all the basics and fundamentals so you might want to check that out now we're gonna be using a package called TS node to integrate it with node and this is it's very easy to use so we'll use that and I'm just going to jump into vs code here and before I get into TS node and all that stuff I'm just going to show you some of the basics of typescript how does how to run the compiler and stuff like that so we're gonna install this globally so I'm going to do sudo npm install - g type scripts and what this will do is it'll give us the TSC of the typescript compiler so just do a dash dash version make sure that's installed and then let's let's create a file I'm gonna call this app dot TS okay your typescript files should have a TS extension and let's go ahead and open up app dot TS and then in here we can create a variable like let's say greeting and let's say this variable has to have a string has to be assigned to a string it'll say hello another thing we could do is create an array so let's say we'll call this numbers and let's say we want to give it the type of number but it has to be an array so we're gonna use put brackets there and then we can just simply create an array of numbers so this is valid typescript now to compile it we can use our typescript compiler and we can put in the name of the file which is app dot TS and what's going to happen is it's going to generate an app j/s which is our actual JavaScript notice the types are gone and it's using var because that's the target by default es 5 however we're gonna create a config file where you can change that target if you want so you can kind of control the type of JavaScript that's compiled now let's mess something up here like let's put a string in here and right away envious code you'll notice the lint in here it says string is not assignable to type number so it'll tell you right within the text editor if you're using vs code but then if we try if we go and compile this it's still gonna compile by default but it will show you the errors down here okay now if you want to constantly watch a file instead of having to type that in every time you can just add the dash W which is the watch flag and now it'll constantly watch it you can see found one error gives you the error if we get rid of that and save we get zero errors okay now this isn't really the the ideal way to do things you want to setup a config file so what I'm gonna do I'm just going to delete the JavaScript file that was generated oh I did not delete let's delete that and then to create a type script config file you can create it manually if you want but you can also use the typescript compiler by just doing - - in it and this file is called TS config dot jason and it has all the values in here most most of which are commented out I know it looks a little overwhelming but you don't really need to know what every single one of these options do there's a couple things I just want to focus on one is the target which you can see is es5 that's why it had var and stuff like that we can change it to es6 or even any of these and this will use arrow functions and stuff like that alright module we're gonna keep that at common j/s the only other things that I really want to change here is gonna be the output directory I'm going to uncomment that in the root directory so the output is where we want our compiled JavaScript to go which I'm gonna have go in a folder called dist and then the root is where our typescript files are stored and I'm gonna have a folder called source okay and then there's one other thing that I wanted to do since we're using no let's uncomment this module resolution - node and then that should be it I'm gonna save that and now I'm gonna create a folder called source and that's where I want my typescript files to live so I'm gonna move that app TS now all I have to do is in the root just simply type TSC no filename or anything it's gonna automatically look at that source folder because that's what I described in the options and it's gonna create a dist folder with an app J yes and now you can see it's using Const it's now you the target is now es6 okay so again you can change the way or javascript is is compiled or created alright so now let's let's get rid of this and we're gonna start to get into node and Express and all that so I'm gonna generate or initialize a package dot jason okay and let's install Express Express is the only regular dependency then I'm gonna install the rest are all dev dependencies so let's uh let's let's go ahead and run npm install - uppercase D which will install a dev dependency and we want typescript even though we have it globally installed we want it installed on the project as well and TS node node Mon which is used to just constantly watch your server we're gonna configure it so that node Mon will watch our typescript files and then you can also install custom types like obviously we can use string bully and all that stuff node itself and express both have their own set of types that we can use so we can do at types slash node and we can do at type slash express okay and these are all dev dependencies alright and then once that's done we want to just add a couple scripts so up here in scripts what I'll usually do here is create a start script that will run the actual compiled JavaScript with just node sorry about that bang and my son's playing with a ball up there so we'll just run node and then let's look in dist which is where our JavaScript is app dot Jas which hasn't been created yet but we'll create a build script to do that okay we also want a dev script which is going to actually run node lon and we want node lon to watch inside of our source our app dot TS our typescript and then let's create our build and for the build we're going to use our typescript compiler we just want to add a dash PFLAG and then dot and what this is going to do is it's going to generate or compile our typescript into the dist folder actually I'm going to delete the dist folder here because it'll create it on its own but it will it will add the JavaScript to that dist folder so let's go ahead and save this that should be all set and then in apt es I'm just going to do a standard Express server here now what's fantastic about this is we can now use the import syntax we don't have to use Const schools require we can just say import Express from Express and just go ahead and initialize it and if you've never used Express before I would suggest watching my crash course on it let's just create a end point here so function with request/response and I'm just gonna have this do a res dot sin which will just send something to the browser we'll just say hello okay and then finally we just need to run listen method will listen on port 5000 and let's just do a console log and we'll do a server running okay so this should run it should even if we run NPM run dev it should watch the typescript file no daman should and we get server running so you can see right here starting TS node source app dot TS and if we go to our browser and go to localhost 5000 we get hello now we can use typescript here we could do string bully and all that stuff but we can also use some of these custom Express types like application so our main app variable here I can actually give this a type of express dot a platonic spresso dot before all this stuff you can simply bring it in like this so application we also have request response and next function so now I can get rid of the express dot and just do application I can add a type to my request of request so response do response and then sometimes you might have a next function which you can set to the type of next function so that should still work if I save that good and of course we can just use regular you know typescript types like I'll create a function let's create a function called add and let's say we want to take in one number and another number and return a number and then we'll implicitly return a plus B and it doesn't have to be an arrow function obviously okay and then we'll call this down here I'll just do a console log of add and pass in five and five okay so now when I hit the route this should run so I'll reload and then go back and down here you'll see we get 10 now we should have in in text editor linting with typescript as well as down here with TS nodes so let's just do a string of 5 and now you'll see argument of type 5 is not assignable to parameter of type number okay it has to be a number because that's what we said it should be here if I change this to string then that error goes away ok and it should also return a number so let's save this and see what happens ok so down here you can see we get our error so same thing Simon of type 5 is not assignable to number all right and this is coming from TS nodes so it's a fantastic program really easy to set up but let's go ahead and change that back ok and obviously I mean you can create interfaces and all use all the the benefits of typescript I'm not going to go over all that I just wanted to show you how to set up an easy workflow now once you're ready to compile or build you can just do NPM run build and what happens is it creates a dist folder with app J s and now you can see our compiled Java Script and notice it's using arrow functions it's using Const and stuff like that because of our target now just to show you real quick if I were to delete the dist and go into my config here and change the target to es 5 let's try to let's build again and if we look at our app jeaious now notice it's using VAR and it's not using arrow function so it's all es5 okay so you can control that and there's a lot of different things you can do within these options but I'm not going to go over that okay and then if we want to run our server or just run NPM start which is gonna run the JavaScript you can see right here it's running node app J s and we can go to our browser and we get the same thing alright so basically the workflow is during development you're gonna use node Mon that's gonna run your type scripts linter RTS node and then when you're ready you can compile it and you can deploy your JavaScript alright so hopefully this helps you guys out that want to start using typescript on the back end and maybe even just to learn a little bit more about typescript in general so if you like this video please leave a like I'd appreciate that and I'll see you next time

Channel: Traversy Media

Views: 152,809

Rating: 4.9580936 out of 5

Keywords: typescript, node typescript, express typescript, ts-node

Id: zRo2tvQpus8

Length: 13min 47sec (827 seconds)

Published: Sun May 19 2019