Learn TypeScript Generics In 13 Minutes

by far the scariest part about learning typescript is generics I mean there's angle brackets everywhere there's these t k v variables nothing really makes sense and it's so much different than everything else up to that point well after this video you'll no longer have to worry about generics because in this video I'm going to teach you every single thing you going to ever need to know about generics in a really easy and concise format so you're going to be mastering and using them by the end of this video and if you enjoy this video and my simplified approach to learning typescript highly recommend checking out my full full typescript simplified course it'll be linked in the description below it's less than 5 hours long and teaches you everything you're ever going to need to know about typescript to start writing it in your own applications welcome back to web dev simplified my name is Kyle and my job is to simplify the web for you so you can start building your dream project sooner and this is probably the first instance where people start to run into the need for generics as you can see we have a really simple function that gets the first element of an array it takes in an array of numbers and you can see it returns the very first element so if we pass it this array called numbers down to it you can see that it's properly returning us to a number this first num variable is typed as a number and there's no errors at all now let's say that we want to do the exact same thing as we're doing here but instead of passing along a number we want to pass along some strings so this array is going to be some strings it doesn't really matter what these values are you can see this is going to be our first string and we're going to pass along the strings into this git first element but of course we're getting an error and that's because this is accepting a number array and not a string array so there's a bit of a problem here we want this to be able to take in any array and return the first element of it but if we type this as an array of any you're going to notice that the return type we get is of type any it's not of type number or string it's just any which is obviously not very useful and if we tried to type this as like number or string for example like this now you're going to see our return type is either a string or a number even though we know in this first case it should be a number and we know in this second case it should be a string but types scripts not smart enough to know that this is where the idea of a generic type comes in anytime that you have a function that you know has some type of data inside of it where you want that data to be changing its type based on what you pass in or based on what you return that is the perfect case for a generic so here instead of typing out the type we're just going to put any for now but we're going to replace this with a generic type which is based on whatever we pass in so to define a function as a generic function you put two sets of angle brackets afterwards an opening and closing angle brackets and in here you just give it the name of what you want this generic type to be it can be anything you often see this called T but we can call it like element type or something like that to really describe what this is and I'd recommend being as descriptive as you can especially when you're getting started so now we have a special type this type can be literally anything but it's going to be that exact same thing everywhere inside this function so we know this element type is going to be for our array so our array is of this element type now you notice just by doing that we have no more errors in our code which is great and when I hover over my first number here you can see that it actually Returns the type of number and when I hover over my first string here it Returns the type of string and the reason why that works if we hover over this function is you can see what happens is when we call this function it's replacing that section in the angle brackets with the type of number so our array is of a number array same thing here down here it's replacing that with a string which means we have a string array instead of a number array so whenever you have a type that needs to conform to the data being passed in or the data being returned or just used in some way in that function you use a generic type like this and you can pass along multiple generic types for example you could have element type two inside of here and this would be a second generic type that you could use somewhere else maybe for a second variable for our case we just have one single generic type because that's the most common and simple use case and the way that this is working is that typescript is smart enough to know okay this numbers object is a number array and we know this array is of some type and it's an array so typescript is smart enough to know that this element type should be a number if it's not smart enough to know that you can actually manually pass this in when you call a function so if you call a generic function you can actually pass in what the generic value should be to help typescript in for those values if it can't and you just put these angle brackets directly after the function name this is actually something that you've probably even done before if you've ever used something like document. query selector for example if I want to query selector all of my input elements that just have a class of input and I know these are HTML in input elements I could say const input is equal to that and if I try to get the value from my input you notice I get an error because input doesn't have a value property on it because by default input is just an element well I know that this is an input element so I can actually use this crey selector which is a generic as you can see and I can pass in HTML input element as that generic type and now you can see my input here is an HTML input element which does have that value property which is why I no longer get any errors so generics are all over the place inside of typescript and you've used them without even realizing them many many times again for example the array. map function so if I just say const a equals and I have an array with like 1 2 3 for example and I say a map and I just want to map over these whatever that function is going to do it really doesn't matter when I hover over map you'll notice that this is actually a generic function that takes in a value but typescript is smart enough to infer that so you almost never have to actually pass in what that generic value is going to be for example if I just take in and I return a string from here and I hover over this map you can see it properly inferred that this is returning a string as that generic value another really common place you're going to see generics is inside of like maps and sets so I could say const map equals new map just like this and this map is actually generic so I could pass it in for example it's going to be a string number map and that just means that the very first value for this if I try to like set something inside of here so I come in here and I say set I can set and it first needs to take a string and then secondly is going to take a number as the value that's what this typing right here is doing but if I pass this a default value it's smart enough to actually infer if I pass it a string and a number that this map is of the string number generic type so again that inference is really powerful and this is how you would actually pass along multiple generics as you can see here I just put a comma between them and everything is working just fine you can even Nest generics inside of each other for example let's say I wanted to have a map where the string is the value and it actually maps to another map and that map is just a string number map as well as you can see I have these two levels of nesting and if I remove this code to get rid of those errors you can see that this map is just properly being nested inside of each other so you can pass generics to generics as complicated as you want to get it now this is going a little bit off the deep end into probably more confusing territory than you need so let's take a step back and talk about generic types in the form of types we've talked about generic functions but you can also make a type that is generic as well this is really common with things like an API response so let's say that we have a type called API response and here we have this type and it has some data we don't really know what that data is for now I'll just say any and let's just say that we have like an is error and this is going to be a Boolean so what I can do is I can say I can say my response here is equal to and I have data which is just something I don't know what it is and then I have an is error which is going to be false there we go and if I properly type this as an API response you can see that this is all working fine with no errors and let's say that this is returning to me a user so we're going to give them a name and we're going to give them an age let's just say 28 there we go so this is returning to me a user but the problem is my response this data is just any no matter what it's always going to be that any type which is obviously not ideal instead I want this to be a specific type so we can make this a generic type again you just put the angle brackets after whatever your type is and then you give it whatever you want that generic type to be called in our case we'll just call this data and then what I can do is I can replace that any with data and now I'm saying that my data is of the type data and immediately I'm getting an error down here because my API response is accepting a type parameter that generic and I haven't passed in a generic so I need to give it a generic because it can't infer what the generic is it's not smart enough to do that so what I can do is I can say this generic is going to be a name which is a string there we go and an age which is a number and now if I close all that off and save you can see now everything is working and when I hover over my response you can see it's an API response where the name is a string and the age is a number so it has all the properties for is error and then this data type is just inferred from this generic that I passed in and I had to manually pass it in cuz it can't do that crazy inference now often times you may want to make this a little bit easier to read so I can actually take this and turn it into its own type such as user response I can say type user response is equal to this type right here and it's just allowing me to create an alias for that type which makes my code a little bit easier to read now the reason this is so powerful is because if I wanted I could create a brand new type for example if I have a Blog that returns some data I could get a Blog response and if I copy this down and make sure that this blog response for example is just a title with a string you can now now see that in this response for my blog if I make this a Blog response my data right here will now give me an error until I give it a title which is a string and then my errors go away this is a really great way for me to expand upon this I have a generic API response that takes in this data and then I can make specific versions such as a user response or a Blog response and so on that really narrow down what the type of that data is going to be now let's just assume a lot of the API endpoints I have don't really have very complicated data and instead the data is just a status so for example I have a response that looks like this where I have a status which is just a number like that and I have a lot of API responses that look like that and by default they all look like that unless I specify something specific what I can do is I can actually give this a default value so if I just say equals here status number I'm now saying that by default if I don't pass anything inside these angle brackets my data is going to be of the type in object with the status property that is a value of number so now what I can do is I can just clean up my code quite a bit let's just get rid of everything except for this one response that we have right here instead of making this a specific response I'm going to make it an API response and this API response expects a status property which is a number to be passed along by default so since I didn't pass along in generic it used this default value right here but if I want I could override that by saying for example name String and now I need to pass along a name which is a string in order to make typescript happy and of course clean up my code there we go now the final kind of major thing you can do with generics is you can actually give them a type that they must adhere to for example what I could do is I could say you know what I want my data to be a string and this is going to work just fine so for example I can pass along a string and everything's working just fine but I know for a fact that my API response data must always be an object it can't be a string or a number it must always be an object well to get around that what I can do here is I can say that this actually extends a specific type in my case object you could make it more specific less specific but I'm saying that this data must always be an object now we get an error here because string does not extend object this must be an object for example a name that has string and now you can see that if I type in the name that's a string that is now working just fine I can even combine this together with a default value by just coming in here and putting an equal sign for status which is a number and now if they don't pass anything in here at all it defaults to this status number so if I change this to status of 200 you can see I no longer have any errors now these last few things that I covered are really some of the more complicated use cases for a generic in 90% of your cases you're not going to deal with extending you're not going to deal with default values you're just going to have a single generic maybe two generics and you're just going to use them in a couple very sparingly places you may use them in types but most often you're probably going to be using them in functions in which case you generally don't even have to pass along the actual generic itself because inside of functions it's almost always smart enough to infer what that generic type is based on the inputs and outputs of that function and I know I've covered a ton in a really short time so if you need to rewatch this video I 100% recommend it but the key to take away with generics is when you want to create a function or a type where some piece of data inside of it could be multiple different types but during the entire iteration of that type or function you want it to be the same thing but for example it could be a number one time or a string the next time depending on what array you pass it like in our first example that is the perfect use case for a generic and if you enjoyed this video and you like this short simple concise to the point x explanation of everything important about generics you're going to love my typescript simplified course CU I do this exact same thing for every single typescript concept out there giving you everything you need to know about typescript in less than 5 hours so if you want to check that out it's going to be linked down in the description below and if you take that course you're going to be able to use typescript by the end of today which is just absolutely amazing so with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 193,469

Keywords: webdevsimplified, ts, typescript, ts generics, typescript generics, type script, type script generics, generics js, javascript generics, java script generics, js, javascript, java script

Id: EcCTIExsqmI

Length: 12min 51sec (771 seconds)

Published: Tue Dec 26 2023