Using Typescript in Node.js

so I'm gonna be showing you how you can get started with typescript EndNote GS this is aimed at beginners that have no experience with typescript or very little I'm going to be taking you from scratch I have an empty folder right here and we are gonna get you started and how you can start a new project that is using typescript now the first thing I would highly recommend using vs code for this as your text editor because it works fantastic typescript you're gonna get intellisense and hover bowl types and whatnot it works great but either way you're gonna want to open up an empty folder we're gonna start by doing NPM an it - why give us a package of JSON so once we have that we are going to add typescript to our project by saying yarn add typescript as a dev dependency - D there and then we are going to initialize our project with typescript we need to create a TS config file which basically stores the options for our typescript compiler so I'm going to say MPX t SC and knit so this is the name of the typescript compiler or how you invoke typescript you say TS c and this will compile stuff and whatnot and we'll deal more with this in a second an MPX just lets us run scripts alright so we create a TS config dot JSON file right here after this video I recommend just reading through this there's a lot of options in here and it's good to know when you want to turn things on and off and they have some nice comments on way may want or why you may not want something okay so first thing is we want to start running some code so we are gonna say source slash index dot TS and I'm just gonna console.log hello from typescript so I want to execute this code how can I go about doing that note I did a dot TS that is the intention or the file type for a typescript so what we're gonna do first is we are going to compile this into JavaScript or transpile it into JavaScript so we're gonna say build so we're gonna create a new script in our package a song and then we're just gonna run T SC so it's going to execute a typescript it's gonna build our typescript file into a JavaScript to file so all right let's run that yarn build and we have a J's file now and we can see our console.log there and once we have that we can just say node source slash index GS and so that's how you can run your typescript code you compile it and then run it with node now this is kind of annoying to do every single time in development so we can use a library or a module called TS node so what TS node does is it allows us to just point it at so we're gonna say script start TS node source less index aw TS so we can just point it at a typescript file and it's gonna run it it's gonna compile it and run it with node for us so now I can just say yarn start and it's gonna run it no problem and this is basically the workflow of how to run it now if you're right if you're working with something where you're constantly making changes or your say using a server a next thing that's really nice to use is called TS no dev so against all that TS no dev and what this does is it's basically gonna watch our files and whenever we make a change is going to restart the server so we're gonna say dot - - respawn and then that will restart stuff I don't know if this will actually do anything since we don't we're not starting a server it looks like it is gonna wait so let's come over here and say hello to give it a save you can see it reacts acute it so that's pretty handy you can also do this with a package called node none are no demon is I like to say and I should have installed this as a dev dependency so let's just move this up here for a second I real if you want to use that sometimes this doesn't work with Windows computers or whatnot you can do that so I'm gonna call this dev and you could say no demon - - exec and then we're gonna say TS notice or slash index yes basically we're saying no demons gonna watch our files and it's gonna execute TS node whenever we make a change all right so let's do that Rea in our code make a change and bam so you can choose one of those I've been using TS no dev but it really depends some projects ones faster than the other alright so the next thing is we want to start interacting with other libraries we can easily interact with types treat libraries but we're also gonna want to integrate with JavaScript libraries so for example you may want to use the Express library oops should do yarn add Express so this is a JavaScript library now I want to be able to know the type definitions whether it's a number what the function signature is all this fun stuff about all these express values so some people have basically made some or written some typescript definitions for this javascript code so we can know what the values are so we can add this to our project by saying yarn add types slash express and now there's also a good package we want to install called at type slash node so this is going to give us access to type definitions for nodejs packages or packages that are built into node so what do I mean by that well now when I import from FS for example we say I don't know let's do write file if I hover over here we can actually see the entire signature of this function I can see that I'm so spaz a path in which can be a string and by way these pipes mean or in typescript so string or number or buffer or URLs how you would read that so let's just also let's just go through this real quick so that's the type of the path then there's this second parameter called data and it can be able to type any then there's a third parameter called options I can be of that is of the type right file options and then there's a callback so this is of the type is a function right there and then lastly this right file function returns avoid so let's say you can read these things and see what they return so because we are interacting with no GS which is written JavaScript or at least it does not written in typescript we can get the types for it by installing third-party packages that are called at types so how this works is not all packages have this and we're gonna talk about how you deal with that in a second but you will install them the name of the package so expresses the name package on one install it types for so I say app types in front of it so pretty much any time you add a package you'll also try adding the types where it that way you get information about it ok so that is that so let's talk real quick about how we deal with packages that we don't know information about all right so I I want to know this stuff but sometimes you can't some JavaScript libraries don't have it so like for example let's say I want to use the library short ID now this one I do know for a fact does have it but let's say it doesn't have it so now if I import from short ID and I'm gonna say generate alright so I can say generate here we can highlight it that and we can see we get just no information about it so that's what happens when you don't have types you also see if I hover over this says could not find decoration file it even tells us we can try installing it by doing this if we want to but what do we do if we do not have the types for it so scenarios come up for that and for that I usually create a file or folder called like types or types or app types and then I'll create a file in here called Shore ID DTS so basically I picked the name of the module and then do DTS and then here you can say declare module and then short ID so basically what I'm doing here is I'm declaring that this can be of any type so this is just anything we don't know what the type definitions are we're just saying typescript don't bother me this is just gonna be anything all right now you can actually come in here and declare the types we're not going to get into it in this video because actually these days I rarely do any kind of type decoration most of the time you can install types for JavaScript packages because typescript is getting very popular but you may need to occasionally do this to get to get typescript yelling at you so it's good to know about that all right so let's let's continue on so we have import from Express so let's import our Express and we're gonna say Const Express our app is equal to Express all right and because we installed the types for this see why is it so mad at me can hover so this is you'll know it is whenever you're using typescript you're going to get red squigglies now every we're also good to know like for example I'm hovering over this and I'm like duplicate identifiers Express what is even talking about so there's going to be scenarios that come up where that types your compiler is either lagging it's slow and these cases I hit command shift P and it brings up the command palette here for vias code and then I just say typescript restart server so if you type typescript it'll come up restart server and so what that's going to do is it's going to restart and you see once it's restarted it's not mad at us anymore because really my code was correct so sometimes you need to do that to make sure it's okay all right so I'm gonna say app dot listen we're gonna listen poor 3001 and we can just say started so now let's say I want to say apt-get and I want to say no notice we get some nice intellisense here we got a request handler whoops I just like turned insect remote on alright so what I want to show next is let's say we have this request object here and I want to know more about this thing because we're using typescript we actually don't even have to look at docs to know information about stuffing or I freaking love this so here's the thing so we can see if we hover over this is of the type request but that's pretty much useless to us we don't know anything about this we can't get some intellisense by just saying req dot and we can see all the properties on it another cool thing that we can do is we can right-click and we can say go to definition or peek definition or go to type definition these are all helpful so if I hit command and click I can also do that - looks like it's laying a little bit and then we can peek the definition we don't want to do that I thought it would take us to the thing let's just go to get type definition that's best that sometimes it doesn't take it I sometimes you have to do type definition that's what I wanted to show anyway so let's go to that so here we can see is the interface that the request is and so I can actually go here and when you get more familiar with typescript this is going to start to make more sense and you can see the type definition for the request so I can see all the different properties on it and what those property types are and I can just look around here and I can do whatever I want to here so I can see the high piece of string IP IPS is a string array and whatnot so it's just a good to know about that you can go in and get more information about that stuff all right so next up is you're gonna run into weird stuff with typescript we're stuff just is not working what do you do so what do I mean by that so let's say I want to say add the object name on here so I'm gonna call my request object dot name is equal to Bob here we're gonna see it says property name does not exist on the type request so this may look super foreign to you if you're not used to typescript but this is a very basic air what it's saying is we just looked at the type definition and nowhere in here did it tell us in this interface that there is a name property that's a string on there yet we're trying to assign one here so whenever you get into these cases where you want to do funky stuff where typescript is not is you know not flexible enough for you you can basically escape these things by casting it so we can cast the value of the type so we can say has any here and then it's gonna stop complaining so this is basically your xscape hatch is you can cast this object to anything you want you can also if you want to assign it up here you can say : any so this is how you declare the type of a function parameter so I'm gonna say type is any and so now this thing can be any but as soon as you give say type any on this thing we have no idea what it could be but it allows you to do whatever you want so I could do rect out Bob it's not going to be mad at me and I can see the name and I can console.log it now so this is good to know about whenever you into situations where you know your code is right but the types your compiler is complaining to you you can always escape with any and I recommend doing that whenever stuff comes up and then you're slowly gonna get more familiar with typescript how to solve errors and whatnot and you can get rid of these later on okay so next up is you're gonna run into things with undefined so let's say I have a function here let's call it just add so we're gonna say a B and we're gonna turn a plus B so the next new thing you have to realize is when you start creating functions and typescript typescript needs to know what the types are you can see how it's saying it's parameter a implicitly as type any what does it mean by that well it just means you need to put a type on this guy so we're gonna say number number and if I hover over add again I can see intellisense I can see what the values of these are now you can see this thing returns a number if I want to be explicit at the end of the thing here I can put a colon and I can say number and I can explicitly say what the type is again if I start doing string it's now I'm gonna bark at me because I'm adding two numbers here I'm gonna do something like that to turn to a string now all right so that's just a little syntax tough now let's say we introduce a undefined variable so basically what this means is I can possibly not return the value so or pass the value so right now if I call add it's gonna be mad because I'm not passing in the two parameters so now if I say one two it's now happy because I'm passing in a and B now what I can say is I want B to be optional alright how we do that is we put a question mark right here and so now it's not going to be mad at us only passing it one here but it is gonna be mad at is we can't do a number plus undefined so the way you deal with this and you're gonna see this air all the time it's this object is possibly undefined you're gonna run into that all the time whenever you get this what you need to do is you need to say if B do something else if you do not get B do something else so in that case if B we're going to do that otherwise we're gonna return a plus 0 or something right which would just be a and C that is one case now there's gonna be cases again where this comes up and this is basically where typescript in fir'd it for you it inferred that we have an if statement here so we know that B is not undefined so you can add it there's gonna be cases where typescript does not realize it typescript is dumb sometimes even though you've checked it and it tells you it's still undefined what do you do well if you do an exclamation point is basically asserts that you know this is not gonna be undefined or just leave me alone right like hey I just want to do this stop telling me stop complaining this is also another escape hatch I really recommend not using it though I rarely use this but you can do TS ignore so it's a comment at TS ignore if you want the compiler to just ignore it if you want the line to act like for example some JavaScript and wonky stuff you can do that use this very sparingly I much prefer casting stuff to any also note you can cast this to other stuff as well like I could just cast this to a number as well that works so that you can cast these the different types right but anyway so that's going to come up a lot is undefined use an if statement or if you know it's defined you can add an exclamation point like that and that's how you can avoid it and it's gonna happen with objects too and that I think is all I wanted to talk about at least starting off with typescript and no GS I guess the other thing we should mention real quick is I talked about interfaces a little bit earlier this would be good to know about almost everyone asks when do I use an interface and why don't I use this thing call it type so interface and I might call my interface crams and a is a number and B is a number so this is me defining an interface which is just means an object which has the two values here we're gonna call X is going to be of the type params so now I said X here has an object which has the properties a and B so now I can just say X dot a plus X a fee right but I could also define this as type type params too all right and we could do that as well so some people get confused about when to use interface when to use type my suggestion what I always do is like create interfaces for objects and I use type for everything else so for example if I want to say the type of a function you can do that so it's for example type FN so I just made a function that takes no parameters and returns void but if I wanted to type my add function we could say a is equal to a number B is equal to a number or if we can use our interface here alright so we're going to say X is params and this is gonna return a number so now I can say this is gonna return add right this is the value of add and then I don't have to define it here anymore because I defined the whole function right here so those are some other things basically now that using typescript what you do is you start coding stuff and then you listen to the typescript areas and try to fix them so now we're passing this in wrong I can do a is 1 B is 2 but there you go that is how you can get started you where you start working with typescript and nodejs go ahead and get started making servers and whatnot you are ready you

Channel: Ben Awad

Views: 93,321

Keywords: nodejs, node.js, Typescript, Typescript in Node.js, Using Typescript, typescript node, typescript node.js, typescript nodejs, using typescript node, using typescript nodejs, nodejs typescript, node typescript, node.js typescript

Id: 1UcLoOD1lRM

Length: 19min 21sec (1161 seconds)

Published: Fri Jun 21 2019