How to setup Nodejs Express with Typescript

okay guys so welcome back again so in this video let's see that how do we set up our node.js express application using typescript so without wasting any time let's dive into our terminal and let's see that how do its turn so firstly what i'm going to do i'm going to create a new directory here and i'm simply calling it express ts so express iphone ts would be the name of my application or the directory in which i am working upon and now let me see it into this directory that is expressed yes and now let me clear out again and let me see see ls what's inside here so it's an empty directory as of now so the first thing which we need to do here is this that we need to create a new npm project inside it so i'll simply do npm init hyphen y to keep all the default values and it would basically create a package.json files so let's see that what it has created so it's created a package.json file inside this directory called expressds and now what i'm going to do i'm going to open this folder inside vs code though you can use any text editor you want to use but i prefer to use vs code so i'll simply open it in vs code by doing code dot to open it in vs code and now i will go for the screen here and let me increase the font size here a little bit not much so now let me open the integrated terminal inside vs code here and now here i am going to install a couple of dependencies here so the first thing you need to do is to install typescript globally on your system so what you can do you can either do this thing here that is npmi hyphen g type script to install it globally on your system or what you can do if you do not want to install typescript globally on your system then what you can do you can simply install it as a diff dependency inside this project and then we can simply use the npx command so that's what i prefer to do so i'll do npmi hyphen d as a div dependency and i'll simply do type script like this and now i'm going to use one more dependency and that is called ts node so this is what i'm going to install so these are the two dependencies which i'm going to install as of now or let me install one more div dependency that is called nodemon which simply restarts the server when it says changes inside dot ts files as well as dot js files so let me install them right now and later on we'll be installing express also so now let me install express so let me clear out the console first here so let me clear it out so clear so now i'll do npm i express and now let's wait for a couple of seconds and now let me minimize the terminal here and we see that inside our package.json file we have our dependency that is express and then we have some div dependencies that is nodemon ts node and typescript so now what i'll do is simply initialize a new typescript project inside this project itself so to do that it is very simple to do so for that what i will do npx tsc hyphen hyphen in it simply like this and if you have installed typescript globally on your system by doing npm i have ng type script then you do not need to prepend this npx here you simply need to do tsc hyphen iphone in it because then tsc would be an executable inside your terminal so you do not need to prepend this thing here but i need to do so because i have installed it as a dev dependency so what it will do it will simply create a ts config.json file here so let me minimize the terminal once again and let's go to the tsconfig.json file and here it contains a lot of options for you to choose from but we are interested in only a few options here so what i'll do before looking into the options here what we need to provide here and what we need do not need to provide here what i am going to do i am going to create a couple of folders inside my this project folder here that is inside which my package.json file resides so here we want to create a folder called source so let me create our source folder here and basically the source folder would be containing all our typescript files here that is whatever we are going to write for our application we are going to do inside the source folder and then there would be another folder here inside this folder itself which would be automatically generated by typescript that would be called dist folder that is dist or you can simply call that folder build folder in which whenever type script is compiled down to javascript all the files that are present inside the source folder that are typescript files would be compiled down to javascript files inside that folder that is either the dist folder or the build folder or you can name it as in what you like but i prefer to call it either dist or build so now we see that inside our source folder we do not have any file here so let me create one file here that is app.ts and that would be our entry entry point for our application that is whatever we are going to write we are going to write it inside app.ts and for now what i am going to do i am simply going to log one statement here that is console.log or if you cannot see i can increase the zoom level here so console.log 123 that is only the thing which is present inside app.ts file and now what i am going to do i am going to go inside my package.json file and here what i am going to do i am going to define a couple of scripts here so firstly i want to define a dev script that would be running your development server so here i would simply say nodemon app dot ts and this should be nodemon dot forward slash source app.ts because app.ts is inside this source folder that is inside the current folder and then inside the source folder we have this app.ts file and that is what we want to run whenever we use our dev server here by doing npm runtive and then we also want to have a start script that is start script and it would be simply called node dot forward slash dist forward slash app.js because whenever this uh file is compiled down to javascript that is app.ts it would be compiled down to app.js and since i would i am going to use dist as my build folder or if you are using build as your build folder then you can simply put in build here simply like this but i am simply going to call it list here so whenever this folder that is the source folder is compiled down our disk folder would be containing all the files that are javascript files so now to make that happen that is whenever we want to compile the source folder and all the files should be present inside the disk folder we need to do a couple of things inside the ts config.json file so let me minimize the font size here and now here what i need to do here we need to choose the target here so since we are in mod we are using mode in javascript so we are good to go with es6 syntax so i am using es6 here that is the language version for emitted javascript so i'm going to use here es6 you can use es5 also that doesn't matter but in my case i am simply going to use es6 here and then we need to choose the module here and module would be common js for node.js express application and then we need to provide in the root directory of our application and in our case the root directory of our application is this source folder so let me search here for the router so router so it should be this thing here that is the root directory of our application is uh i simply uncommented this line here and here the root directory would be dot forward slash source simply like this because this source folder would be containing all the typescript files and then we need to define the outer that is whenever our typescript is compiled down to javascript where it should be outputted to so for that i am simply going to search for outer inside this file so it should be present here somewhere so it is the this thing here so let me uncomment this line here and in our case outer would be simply dist and if you are using build here just make sure that if you are using build here then inside your package.json file to start the application you need to provide in build here and not test so this thing you should remember i'm simply outputting the typescript files to js files inside the list folder so i am simply making this outer to be disked here that is this thing here and then oh we need to provide a couple of more options so here we need to provide the here a module resolution would be node so let's simply search here for module resolution so here we have this module resolution thing so you simply need to uncomment this line and it would be simply node and then i think that would be all here because every other thing would be like for its defaults values so like this should be at default that is true and this should be again true and it is a default value i am not changing those values and here we need to provide in one more property which simply make sure that only the typescript files that are present inside the source folder should only be compiled down to javascript files if you have any other files inside the root folder of your package or your application that is if you have any file here like let's say test.ts if you have any file here this file we do not want to compile it it may be here for reference or for some other reason so we only want to make sure that only the files that are only the typescript files that are present inside the source folder should be compiled here so for that what i am going to do let this test file test.tsb present here and here let's go to the typescript.config file that is tsconfig.json file and here we need to simply provide in one more property here that is include and here what we need to include we need to simply include the dot source folder that is this folder should only be compiled so let's save this and now let me open the terminal here and if we have a look at the source folder we currently only have this app.ts file and it simply has this log statement so let's try to compile it to javascript so let me clear out the screen once again and now what i'll do is simply do npx tsc simply like this that is the only thing you need to do and if you would have installed typescript globally then this tsc command would be available inside your terminal and then you do not need to prepend in px so that's one thing you should make sure that if you are if you have installed typescript globally then you do not need to prepare npx so now let me simply do enter and now it would take a moment or so and now we see that we have a test folder present here and if we open this disk folder we see that we have this app.js file so now let's try to start both the applications in div mode and in the start mode also so for the dev mode we can say npm run div and it would start the application using the nodemon thing and we see our log statement here that is one two three and if we simply change this one to three two one two three four and we save the application when then we see that the application is again started and now we have this log statement so let's stop this application and now let's simply go to our list folder here and we have this app.js file and to start this file or this application what we need to do we need to simply do npm start simply like this and we see that we get this lock statement so we see that everything is in its place and everything is working and now let me show you one more thing and that is the reason of including the source folder here so let me comment this line out from here and let me save it and let me go to my terminal once again and let me clear out the screen and now we see that we have this dist folder and we have this app.js folder and we have this test.ts file so if i did here in pxtsc simply like this then watch what what would happen firstly this source folder would be compiled down to this this this folder and then this file would also be compiled down to javascript just wait and watch and we would be getting an error also so let's press enter here and we see that we get this error also that is here let me show you the error first that is here we have provided in the root error router and our router is this root directory that is where it is that is this dot source folder but we also have this test.ts file inside our root folder so this is also compiled down to this test.js file as you can see here so that is the error we are getting here in the console so it is always recommended to include this net path here that is let me scroll down here that is to include the source path so that is why i have put this source statement here that is this include statement here not source but include statement so just make sure that you include this thing here otherwise you might get some errors so that's all for the typescript configuration so now let's start working upon the express project so let me delete this test and test.ts file because they are not necessary for this project so if we have a look at the package.json file once again we see that we only have one dependency here that is express and now we need to install the types that are provided by express so let me do that so let me clear out the console so i'll do in pmi hyphen d because we are only working with typescript whenever we are inside the development environment and not in the production influence in production environment whatever is going to be used is this test folder that is our basic javascript folder so whatever dependencies i am going to install here or whatever types for all the packages what i am going to install or what you should install should remain inside a dev dependency that is they should be a part of depth dev dependency and not inside the dependencies here because eventually these are only for development purposes and not for production purposes so therefore i'll simply do npm hyphen d at types forward slash express like this and then we would be also installing types for node so forwards at types forward slash node and then uh let me install this as of now and then i would be installing one more package and i'll let you know that why how do we need to do that so now we see that here we have this these dependencies that is at types node and add types express so now the types for the express packages has been installed and the types for node so now what i can do i can simply start working upon the app.ts file so now let's go to the app.ts file and here what i need to do i simply need to import express from from express and see we do not need to require here we simply need to use import here and not require so now we have imported express and now what i am going to do i am going to simply say const app equal to express like this and don't worry about the types here because here i am simply implementing a very basic express application and then later on we would be implementing the types here and then finally what we can say we can say apps dot listen and here we need to provide in the port let's say 3000 and then we have a callback here and here we can simply log here that is uh server is on port something so let's see this rocket like it's a rocket server when we are using typescript so server is on port 3000 simply like this so let's save this and now what i'll do i'll simply listen for the root route here or for the index route here so what i'll say apps dot get forward slash and just stay with me because it is not going to be a basic express application like javascript like you get you are seeing right now we are simply going to convert this to typescript that is how do you use typescript inside an express project so i need to provide you with the basic skeleton of the default express template and then we'll be migrating this to typescript so then we have a callback here that takes in request response and next function simply like this and here we can simply say rest.send like uh hello from ts app simply like this so let's save this and now we have a very basic express application and if you wanted to run this application we can simply do npm run dev and our application would be started on port 3000 and it would we see that we have this application running on port 3000 so which means that our application is up and running so let me minimize the terminal once again and now what i am going to do here that is currently we have only written javascript that is plain javascript here there are no types present here so we do not know what is the type of this request object here what is the type of this response object here what is the type of this next function here so what we can do we can import something more from this express package that is we can have the request type here then we can have the response type here and these are all coming from at exp at types forward slice express package that we installed as a div dependency and then we have the next function here like this so what we can do we can simply provide in the type here like this that is request that is request is a type of request response is a type of response and this next function is a type of next function like this and now again that is what is this app here so currently it is an express application but to give this app that is to give this variable app or to give this instance a type here what we can do we can import one thing more from this express package and that is application because whenever we create a an app using this app express package like this then it returns as an instance of an app that is of type of application so we can say this as an application what this listen method would uh give us back basically it simply provides us with the server so where the server comes from it comes from the node package that is it simply provides us with a very basic http server so what we can do we can go at the very top here and here what we can say we can say import something let's say something from http because we are creating an http server here and here we can simply extract the server thing here like this and now what we can do we can simply say const server equal to this thing and this server would be of type of server simply like this because this app.listen methods provides us with a very basic http server so we know that this server would be type of server which comes from the http package so now let's save this application once and now what i'll do i'll simply define the express error handler here because till now we have done the basic steps so now let's implement the express error handler so for that to use the express error handler what we need to do before that we need to use the 404 route that is how do we handle the 404 route so for that i'll simply say app.use like this and then we have the callback here that is request response and next and again if you want to provide in the types here that is for this request object response object and next function you can simply provide it as it is so let me simply copy it from here and let me make it put it here because it would make more sense to you and then here what we need to do we simply you need to use this next function here so we can say next and here we can simply use one more package here to create the error function so for that let me stop the server here and let me install one more dependency here so let me stop it so let's clear out so let me install one more dependency that is npmi http errors this is the package i am going to use for error handling in express application so it would be a dependency and not a div dependency like this so let me install it and now i would also install the types for this http errors package so let me clear out so npmi hyphen d at types so you see one thing that is whatever package you are installing if you want to install the types for that package you simply need to prepend add types forward slash and then the package name and then simply install it as a dev dependency so now let me simply press enter here and now the package is installed and now what i'll do is simply do again npm run div like this and now let's minimize the terminal here once again and now here at the very top i simply want to import that create http error package here so create http error from http errors and now whenever we are inside this 404 route we are simply going to say next new create http error dot not found simply like this and now here we need to create our error handler so what i'll do i'll simply call this error handler to be error handler so i'll say error handler simply like this and now this would be something so for now it is simply a placeholder value here but this error handler would be something and now after this we would be saying that app.use this error handler that is simply a middleware here for error handling so i would say error handler like this and now it says that it cannot use this error handler because we do not uh because of something something something so just don't worry about this so firstly whatever what an error handler takes it is a function here that simply takes in request response next and error as the first parameter that is the that is the major thing that is any error handler would contain error as the first parameter here and now how do we how we see that we have the red squiggly lines all over it as you can see that we have red here red here red here red here and it is because we haven't provided in the type of this error handler so how to provide in the type here so it is very simple it is again coming from the express package so let me simply import one more thing that is error error request handler simply like this so let's save this and now we have this thing here that is a error request handler so let me copy that thing and let me simply make this type that is the type of this error handler to be error request handler and now we see that all the errors are gone and now we what we can do we can simply do the generic stuff that is rest dot status would be like um error dot status or 500 simply like this and it is like plain express thing so nothing fancy about this and then we can simply say rest.status would be error.status or 500 and simply and similarly for the message we can simply say error dot message simply like this and now this would work as an error handler for our application here so this is how you set up express application with typescript so let's see that how do we compile it down to our javascript thing here so we see currently we have only this thing here that is coming from the previous app.js ts file which we created at the start of this video and now let me simply stop this application here let me clear out the console and now what i'm going to do i'm going to simply do npx dsc simply like this and again if you have installed tsc that is typescript globally then you do not need to prepend typescript and now we see that we have this app.js file here which simply contains our application here and we are not interested in what's inside here we are simply interested in running this application so what we can do so we can simply say npm start so we see that our application is on port 3000 and here what we can do we can try to go to that url so let's go to localhostport3000 so we see that hello from tsap that's what we expected and if we go to any other route which doesn't exist we see that this route is not found and now one more thing or one last thing for this application let's stop this application and let me simply do npm run dave so what we can do here we have hard coded the number port number here so what we can do we can also define the port to be of type of number so we can say const port would be of type of number uh where it is so it should be of type of number and this should be equal to number and then here typically the port would be coming from the env file so what i'll do i'll simply create an env file inside my root folder and not inside the source folder just be aware whenever you are using environment variables they should be inside your root folder and not inside your source folder so i am simply going to create a new file here that is dot env simply like this and now we can see that this dot env file is present inside the folder in which both source and dist are present and not inside that source folder otherwise it would give you an error so here we can simply say process dot env dot port and we are yet to define the port inside our env file so let's define it right away so port 3000 and here inside this thing or if this number cannot be casted or if this variable that is present inside the env file cannot be casted as a number then we are simply going to use 3000 as our default port and now we can use this port here that is this port variable here and here we can use template string like this and here we can provide input and we can we can use backticks instead of single quotes here simply like this and now we need to install one more package here and that is the dot env package to use this env file so what i'm going to do i am simply going to install one more package that is npmi dot env i suppose that that's what it is called so now i can simply go to my application here at the very top and here what we can do we can simply import config from dot env not detainee nv but dot env like this and here we simply need to execute this config here to load all the environment variables present inside the dot env file so if we run this or if we save this file and let me change the port to 4000 to make it more intuitive so we should be having our application running on port 4000 so let me try to do npm start or let me firstly do npm run div to run it in dev mode and the application should start on port 4000 so if we reload the page we see that the site cannot be reached because it is running on port 4000 so let me run it on 4000 and we see that we are getting the application here so let's stop the application and let's quickly compile it down to javascript so npx tsc and it would take a moment or so and now what i am going to do i am simply going to do npm start like this and now the application is on port 4000 and if we reload the page we see that our application is up and running and our 404 error handler is also working so guys this is all about handling types inside a node.js express application and this is how you set up an express node.js application using typescript so guys that's all about this video so if you have liked the video do hit the like button and if you haven't subscribed to the channel do subscribe to the channel it helps me a lot and it also motivates me to make more videos so thank you bye tata take care and have a good day and have a great day

Channel: Mafia Codes

Views: 16,561

Keywords: yours truly, how to use typescript with express, express typescript, how to setup express with typescript, typescript express, how to use types in expressjs application, typescript tutorial, how use typescript with Nodejs, Nodejs typescript, express typescript rest api, express typescript tutorial, express typescript setup, express typescript project, express typescript mongoose, express typescript REST API tutorial

Id: xPQH-R8G9Ck

Length: 28min 20sec (1700 seconds)

Published: Tue Oct 12 2021