How To Use TypeScript With Express & Node

hey everyone i finally did it i put my photo in the thumbnail like a real coding youtuber does i guess you can't teach people to code without uh also posing like this and like this and maybe this one over and over and over so i'm doing it too i guess let's see how it goes today we're talking about typescript and express this is not going to teach you typescript it's not going to teach you express it's just going to show you how to integrate the two so if you need to know either of them i have some videos on both topics i also have a typescript course you can find the link in the description but again this is about integrating the two and getting set up so that you can use typescript with express so here we go okay so i have an empty directory express ts call it whatever you want and there's a couple of things we have to start off with the first would be an npm init let's just do dash y i can't see anything oh there we go uh and now after that i might as well make my index.js to start i'm going to start with javascript get a server running and then work on incorporating typescript okay so i have that and i've opened the folder in vs code we've got my package.json and my index.js so the next thing we'll do is install express so npm install express and then we'll set up a very simp very simple express app in here so i'm going to require express i'm talking one route that just sends text back so we'll do app const app equals express i can't spell const and then an app.get slash and then we'll have our request response callback so if you don't know express at all this is not going to be much use to you hopefully we've seen the basics of express on its own we'll do res.send hello from express plus ts not ts yet all right and then app.listen um let's just make a port variable const port equals eight thousand three thousand whatever you want or use dot env but just to keep it simple i'll just set it to be eight thousand so we'll listen on that port and then let's have our callback that console.logs now listening on port and then interpolate our string template literal the actual port okay so let's try running that node index.js it says now listening on port 8000 let's go to localhost 8000 and here we are everything's working we've got our very basic express app i hesitate to even call that an app so now let's go about incorporating typescript there's a couple of things we have to do the first thing of course is install typescript make sure we write typescript in a typescripts file and then we need to turn those typescript files into javascript and then take those javascript files and serve them but in addition i want to have some watch mode going on so that my typescript is automatically compiled or transpiled to javascript and i want my express app to automatically be reserved using nodemon so i'm going to have to write some basic npm scripts but to start i'm going to install typescript and i'm also going to install the types for express because if i just install typescript and i come over here i rename this as a dot ts file now in my typescript file everything at the moment is of any type well not port that one's obvious it's a literal type but app is any i'm not getting any benefits from typescript right i could do a res.um i don't know mend res dot pickle dickle no problem typescript's not catching those problems and that's the whole point right we want typescript here so i need to install the type declarations for typescript fortunately it's super easy we have our definitely typed type declarations for node and express so it's at types express and at types slash node okay so we wait for those type declarations to install and what happens now does typescript know what's going on here not quite because in typescript land we don't use require right we don't use this form of imports we use the actual import keyword so we're going to import express from express just like that and if we look at express here now we're getting some type stuff going on but more than just the overall express what i'm actually going to import are a couple of named things express with a capital e request and response all capitalized so these are three types that we use all the time in express and technically i don't actually need to import any of this stuff right here none of these named imports but i'm going to annotate my routes with the correct types just to show you what's going on here but if i just look at app right now it already has a type an inferred type of express so if i look at app right in typescript i have things like get or dot post or dot listen right i don't have dot chicken and i get an error so the types are already automatically incorporated or inferred and for the most part we usually don't have to do a lot of type annotations on the express side of things even with my callbacks here typestrip can figure out that request is of type request response res is of type express response but if i want to be explicit i would annotate it like this request is of type request response is of type response and app is of type express but i'm not really changing anything here typescript already figured that out just by installing those type declarations typestrip figures out what we're working with in the world of express okay so the next thing we want to do is try and start the server which is not going to work because it's typescript now so if i tried to run the js file well it doesn't exist if i try and run the typestrip file we're going to get an error because of course we can't execute this as a node script so i need to transpile this code into javascript and what i'm going to do is make a tsc config or a typescript config file so i'll do npx tsc-init to create my new typescript config file right here and there's just one setting i'm going to change which is the out deer art out directory i'll change that to something like dist whatever i name whatever i call this folder i just need to remember because now when i run the tsc command which i'm going to do or i'll do npx tsc just in case you don't have it installed globally i should have a new dist folder and in this dist folder i have an index.js so this is the transpiled typescript into javascript node express app and now i can run that with node dist index.js and we should go back to seeing what we already had but the main difference of course is that this was originally typescript transpiled into javascript so we have the basic workflow now i want to write some scripts to sort of automate this so i don't have to run this myself i want to do an npm run start or run build or run dev and have some fancy stuff especially with the dev server with nodemon so let's start nice and simple in my package.json let's start with just a build script which is just going to do the transpo transpilation uh from typescript to javascript so i'll just do an npx tsc and that's it so that will just be a one-time building of our javascript files based on the typescript files then i'll run i'll add in a start script which is also going to be simple it's just going to run for now just using node it will run dist slash index.js so this is just a way to you know start the server up assuming that we have already built or built the application so i would do something like npm well let me make a change first so we can see that change let's go into our index.ts and let's change this to index or plus ts exclamation point exclamation point times four i do an npm run build that will get me my javascript files npm run start refresh the page and we see those changes okay so now let's get a dev server going that will automate that process anytime i change my typescript files i want the javascript to be rebuilt behind the scenes using watch mode on tsc typescript watch mode and i want nodemon to be in the picture to automatically restart my server so i'm going to install nodemon and i guess i should do i haven't been installing anything as a dev dependency which i should for a lot of these things we can move them to dev dependencies afterwards but i'll just make sure for this one i make it a dev dependency things like typescript that's a dev dependency right the types for express and node those are also dev dependencies so i have nodemon here i'm going to go to my package.json and let's add a dev or dev server or just serve whatever you want i'll just call it dev script and it's going to first do a tsc dash w so that's watch mode for typescript and make sure you do one ampersand not two because two of them uh is going to run them sequentially so this will happen first and then the second thing will happen if i do it this way they'll run in parallel well they'll run in the background at least tsc-w and nodemon index slash or rather dist slash index.js so let's see if this works this will watch any changes and then also update or restart the server if there are changes let's try it npm run dev okay no errors that's looking good and let's make some changes let's uh let's just add a second route in slash hi that responds with hi a lot of capital i's so i saved let's see did it work did it automatically update can i go to slash hi yup i didn't have to restart the server i didn't have to rebuild the typescript or the javascript at least not manually it was all taken care of for me oh a bird just hit my window well i'm back and the bird is no longer with us unfortunately one minor issue it's not really an issue but inconsistency is that here i'm using tsc assuming it's globally installed i'm going to add npx in front of that it should just make it work for more people and then another thing to consider there's two last things i'd like to cover one is this ampersand is not really it's not cross cross-platform it's a unix thing it's not going to work on all platforms so there's a way of changing uh this script to run things concurrently using a couple of packages but one option is actually called concurrently and then the other thing i'd like to do is clear out the dist folder every time we rebuild so right now we're just transpiling all of the code and putting it inside of dist but we might have different files that are no longer used and it would be good to clear those out so i'm going to use a package called rim raff it's like rmrf rim raf for node it's very simple you install it it's really just uh npm install rim raff and then i'm going to set up a script for my build instead of just doing npx tsc first i'm going to do rim raf the dist folder get rid of it and then afterwards two ampersands again is sequentially so this happens first and then this will happen and we could just verify that that works if i just put something in here like that file and then i run npm run build you'll see it's deleted our dist folder is essentially recreated with the new transpiled contents okay so that's the first thing npm run build but that's only going to run when i explicitly call this command so what i think i want to do is add in a pre-command for start a prescript so if i just have the name pre-start whatever stuff i put in here i have an extra space here by the way shouldn't matter will automatically be called this script will be called before my start script so i don't have to manually call that so i'll call npm run build so whenever we call npm run start this happens first meaning the dist folder is cleared out and then we recompile and then we start the server so that's kind of for production if you will versus with dev maybe i'm going to call this serve instead of dev so npm run serve and then i'll have a pre-serve same concept we could also add in a post script post serve post start i don't have anything to do there so i'm not going to but preserve is going to be the same thing npm run build so before this runs we are going to run this delete or clear out the dist recompile which is kind of unnecessary i guess to recompile here and then do it right here but it's fine and that should at least be a starting point so let's do npm run serve and we should see npm run build happens first and then our watch mode starts and at the same time node mod starts so the last thing i want to do is actually change this over so it uses a package called concurrently because this is not really class cross platform as i mentioned this is a unix specific command so i'm going to install that package concurrently like that and this is a package that again helps us run different scripts at the same time in parallel concurrently so what we do is we write con currently and then we wrap our individual scripts that we want to run in quotes but there's one problem if we use regular quotes uh we're like ending the string right here so i need to escape that quote and that quote right there okay so here's our first command and then we have a space and then the second command follow the same pattern backslash quote so here are the two things i want to do concurrently run this and also this and we shouldn't see anything different well it might look a bit different the output but it should still work if i do npm run serve it starts by deleting the dist folder emptying it out rebuilding typescript has watch mode going and nodemon is watching so if i go to let's just update our high res dot send response let's do buy like that it rebuilds right it reserves and i refresh the page we see bye okay so that is good enough i mean there's more that we could do we didn't bother with uh dev versus production we didn't bother with any sort of environment variables this is good enough just to get you up and running with some basics with express and typescript and a little bit of some other packages concurrently is in there rimraf is in there but those are mostly just to sort of enhance our basic setup all right i think that's it so you can find the code in the description a link to my typescript course in the description if you're interested and i'll be back next week with another video i'm gonna do some react stuff coming up so i don't know we'll see how this goes i'm trying to post more often and put myself in the thumbnails and do the whole youtube game uh we'll see how long it lasts okay see you next week

Channel: Colt Steele

Views: 60,423

Keywords:

Id: qy8PxD3alWw

Length: 17min 4sec (1024 seconds)

Published: Tue Sep 13 2022