How To Configure TypeScript in NodeJS - Beginners Tutorial

[Music] hey guys how's it going i'm back here with another video and today i decided to bring actually a video which a lot of my subscribers have been requesting me to make one basically i will be going over how to configure and start an express api using typescript so that's actually a bit complicated for those who've never done this before because there is a lot of configuration that goes behind actually starting your api however when you do it the first time you can take notes on how to actually do it and you can see that it's actually pretty straightforward you only need to configure some stuff like additional stuff so that you're able to make your application work and before we actually get into the video if you guys could leave a like that would really really help the channel grow it would help the algorithm to push my video out to more people so i would really appreciate if you guys could do that and also if you want to check out um a really easy way to deploy any apis um even this api that we're going to build here in this video if you want to check that out i have a little link in the description for zit dot co um it is a really nice platform completely free really fast um i have a video to teach you guys how to deploy it there so if you want to check it out it's in the description so let's actually get into how to configure everything in our application so you can see right here we have um vs code opened and i actually have um it opened inside of a folder called typescript tutorial node i just called it whatever but you can just open it on your folder where your application is going to run and before we actually um start installing packages and creating files in our project we actually have to use a global library called typescript there's actually a global library called typescript which will allow us to configure everything in a much easier manner so i really recommend installing it and i actually opened up the terminal here i'm using mac but in windows should be the same thing i'm also using yarn as the package manager in this tutorial however i'll just show you guys how to do it in npm as well so to install this in the macbook you basically just need to press type the command sudo then if you're using yarn you say yarn global because it's going to be a global package then add and then typescript i actually already added this so i won't um install it again but after you press enter it's going to ask for your computer's password you can just put it in and it's going to install this globally and if you're using windows um i think it should be pretty similar but if you're using um something like npm you can just write npm install dash g between global and also just the name of the packet right and typescript and also sudo in front of this i forgot you can just put sudo in front of this like this and it should work but i don't actually use npm and at the end if after install it you can check to see if it's actually working by running tsc which is the command we're going to be using to test this and slash slash version and you can see mine is running on version 4.1.5 which if it shows a version it means it's installed now that we use this we can actually use um the tsc command to configure and create our ts config file which is actually a json file which is going to like contain all of the information regarding our typescript configuration and that's actually the first command we're going to run over here i'm going to open up my command my terminal over here as you can see i'm just going to clear up everything okay so in here we actually need to run our command tsc init and to actually run that you can just write tsc then two slashes and init like this it will say successfully created a ts config file and you can see that it appears automatically here in our left we don't have to write anything it does it automatically to us which is really nice however we need to make some changes to this just so that we can um satisfy some conditions that we want in our application for example when i write a real api i really want to be following the new standards of javascript right um in the sense that for example i don't really want to use modules for import i want to use import statements for example i want to follow the new javascript um patterns right so to do that i can just change this to any type of ecmascript i'm going i can use six i can use seven i'm gonna use six just as an example over here and it will basically compile our typescript uh to satisfy the version that we want to that we put over here right and what do i mean by compile for those who don't know when you write typescript code it doesn't actually build as typescript because no browser will read typescript directly it will actually read javascript so what happens is when you build your application in typescript it will then further compile to javascript and the browser will read it as javascript typescript will only help us in the development process so that we don't actually um struggle with any bugs right so this is the first thing we need to do and then also what we need to do is we need to uncomment the output directory and the root directory over here so i'm just going to uncomment both of them and what happens is as i mentioned we should have two folders inside of our application one of them is for where our compiled javascript files go and the other one is actually where we write our code so that the typescript files right so what i like to do is actually like to create a folder called build or you can call it whatever you want um then i create actually another one called src which means source right but you can call this whatever you want it's just for organization purposes but make sure that the name you give is actually the name that you put over here so our compile javascript files should go to the build folder and our typescript files should go to our src folder and this is basically what you do for this and this is totally fine and also by the end but at the end what you also need to do is you need to find the um how do i say the module resolution tag um let me find it module i'll just control f module resolution okay over here so you just need to uncomment this because as you can see right here by the way if you want to check out all the things that you can do with your typescript config file um it just exp like just explain what this tag does and as you can see it will just um specify module resolution strategy to node or classic right so you can choose we choose node which is already what comes with our ts config file so this is basically it for change your rts config and that's basically the configuration done now we only need to actually install our packages and configure our package.json and then build our code right so to do that let's actually start installing our packages so let's actually just run the command yarn add and inside of here let's put all the different packages that we want to install so basically what we want to install is obviously express because we're going to run an express server then we want to install typescript and the reason why we actually install typescript is because um we have installed typescript as a global package so that that allows us to use the tsc command anywhere in our computer right even to help us start our application however we also need to install it inside of our project because maybe this code might run in a computer which doesn't have the typescript package installed globally so you need to account for this kind of cases so just installed also typescript inside of here and then we can add more packages for example i like to use nodemon for every sort of development because it will constantly update your your server restart your server when you write your code and i just i don't see myself coding an express api or anything in node.js without using node 1. so then we also need to install install two more packages actually one very important package we need to install is the ts node package and this will just allow us to run again our code and help us configure everything for typescript and finally these two packages that i'm going to add right here are optional however they will help you a lot because remember typescript on its own doesn't account for code that is pre-written um for libraries for example if you're writing code in express there's you need to you need to account for types that can be already built in in express and if you're writing node code typescript doesn't account for certain functions and certain stuff that comes with node so we actually need to install the types for those two libraries inside of our application so to install the type for for example express we can just say at types slash express and for node we can do the same thing types slash node and if you've code encoded in typescript before you know that this is how you actually install types every library that you install you'll probably need to install um the types for that library because if they have support actually so it will help you just configure typescript to adapt to your to the library you're using so now we can run this and you can see that it will actually install everything um mine finished installing so over here on the left we should have um again the build the src and all of these files appeared because i just installed the package right so you can see we have a package.json over here at the left we can also run how can i say yarn.init which is actually really nice so i'll just come over here and say yarn init which will actually ask us ask us for a lot of stuff um questions about our application it will just help us move further and faster in configuring our package.json you can see all of that information appeared here at the bottom um and now we have our package.json where we can actually start making it work right adapting it to a typescript i actually like putting this at the top here the reason why it appeared at the bottom is because i actually installed the packages before um running a yarn in it but it doesn't really matter if you're using npm again just run npm init for this to work and over here we actually just have to write um some small configurations which will come inside of the scripts tag so what kind of scripts do we need to write well remember we're first going to um run our application so our application is going to run on typescript as i mentioned so we need to have a start script over here then we also need a build script over here so i'll just write build and we also need a dev uh a dev script over here right because it's going to be what we're going to run in development so the start is going to be actually what um runs with um what actually compiles our code in javascript it should run in javascript so what happens as you can see in our build folder it shouldn't have anything right but when we create our first file which i like to call index.ts um this is going to be the the entry point of our application right so what happens is when we run typescript it's going to create an index.js in our build folder over here so literally i can just come over here and say tsc and it's going to it's going to convert all the files from the src folder which are typescript into the build folder and turn them into javascript you can see that nothing happened because they didn't put anything in the javascript file because we actually haven't like didn't write any code in our typescript file but this is kind of like the flow of our project right so in our package.json um to run the the build files we can just say node um then build like this build slash actually i need to say dot slash build slash um index.js right and it has to be js because the files inside of the build is going to be js but for the development we're going to run actually node 1. so when we run yarn dev it's going to run node 1. so we can say node 1 um dot slash src slash index dot yes so this is going to this uh script this tag is going to run the typescript version and in our build we actually just need to put um tsc and the p tag the p flag sorry and a dot at the end and this will further like just configure just build our application and compile our code so this are the all the configurations we actually have to write and this should be working for like should be actually making our application work however we need to now write our code in our index.cs right so over here we can literally just write a normal express server however we're going to make some minor adaptations so that it will satisfy typescript so for example we can now use the import statement right which is really nice so i can actually import express like this import express from express and you can see that it will work um then what we can do is we can just create an app from this so similar to how you would do normally with express and at the bottom i'll just say app.listen and when it listens i actually wanted to listen in the port 3001 and i just want to have a function over here which says um console.log server running something like this right now we can actually run this and see that it will work and to run it we can actually just say yarn dev or if you're using npm i think it's something like npm dev or npm round dev so if i run this you'll see that it will start running nodemon and it actually starts our server we receive here server running but we didn't create any endpoints and you can see that it looks very similar to normal javascript so what is the difference well now we can include types not only for functions but also for any variables that we create for example this over here is a callback function it obviously doesn't return anything so what i like to do is i just put i just say that the return type is void for any functions that doesn't return anything so this is something we can do now and if i want to create for example again request i'll just show an example for you guys here i'm just going to create a get request for the route just a standard route and over here we will normally just write a rack a res and write a simple callback function and i'll just say return res.json and send a message for example an object containing a message saying please like the video something like this what happens is this is normal javascript how do we convert this to actual typescript right so in order to do that we can actually grab types that come like we can actually grab the types over here at the top and the types that we can grab from express for example um express built like build built it in um certain types like request and response right so we can just use them as the types for our rack and res like this and response and for this function we are not returning anything in theory so we can just use for example um the void as i did before right and over here completely fine but we can now use um typescript inside of our express api which is really cool if i wanted to create a number for example age i would have to put the the type over here something like this right so this is basically how you actually create everything there's many different types that you can grab from the built-in types that we imported into our application for example if you're making a middleware you can import the next function type there's many things you can do actually so it's really cool and a lot of people have actually asked me to make this video because i already made a lot of videos on typescript but i actually never showed how to create a backend using typescript i've made i've showed how to use typescript on react but not actually on creating an express api using typescript so this is actually something that really confused me when i first tried this out like a year ago but because it there's a lot of configuration and that really annoys a lot of people so yeah that's basically it um i really hope you guys enjoyed this video if you enjoyed it please leave a like down below and comment what you want to see next i'm actually going to deploy this code into github so you guys can just access this configuration and if you're interested in just copy and pasting or cloning it into your application then feel free to do so so check out in the description where i will have the code and yeah that's basically it i really hope you guys enjoyed this video if you enjoyed it please like down below and comment what you want to see next subscribe because i'm posting three times a week and i would really appreciate it and yeah hope you guys enjoyed it and i see you guys next time [Music]

Channel: PedroTech

Views: 7,817

Keywords: crud, databases, javascript, mysql, nodejs, programming, typescript, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, typescript tutorial, typescript nodejs, typescript express, tsconfig, tsconfig.json tutorial, configure typescript, typescript tutorial for beginners, how to install typescript in visual studio code, how to install typescript in node.js, express typescript, node typescript, express api

Id: SEnAS_ooHeA

Length: 16min 15sec (975 seconds)

Published: Fri Feb 12 2021