Typescript Generics Tutorial

alright so in this video we're gonna be going over how generics work and typescript so they may look really scary but we're gonna be breaking them down I think you'll realize they're actually quite simple when you start from the beginning so we're gonna look at the most basic generic there is an typescript I would say which is the array so in typescript we can say array and then we can do these angle brackets and we can put a type inside of it so for example I can say number and so this is the generic part right here alright it's a type that we put in the angle brackets so in this case I said number so I could say type is equal to num array and now I create a new type called num array which you can see is an array of numbers so the reason why this is called the generic is we can kind of put any type we want here and that's gonna change what the value is over here alright so we have an array and let's say we want a string array we would do that and now this type is a string array and so we can put whatever type that we want here and that affects what the end type is here alright so how does this help us and practice where can we use generics so we're gonna start with a function and where this kind of helps to use generics so I'm gonna create a function called blast and what last is gonna do is it's gonna take an array of numbers alright so this is my array of numbers type I could also do the generic either one works and then what I want to return is the last element of this array so I'm going to say our dot length minus 1 alright so what I'm going to do so I'm going to say last is equal to or L is equal to last I'm gonna pass in an array of 1 2 3 so what this is gonna do and if we look at this this is going to be a number and we can hover over last what's going to do is it's going to take our eight numbers and it's turn us back a number so what if I want to do the same thing but with a string array all right right so it's gonna tell me typescript that this doesn't work because I said this has to be an array of numbers but our function doesn't really need to be specific to numbers our function here should be able to work with any type of array so you may be thinking all right what we can do is we can say our array can be of anything okay so now that works typescript is happy but the problem is we lose some of the type definition so what do I mean by that if I hover over what the variable L is you can see it's of type in E and l2 is of type any but we know if we're taking the last element here this should be a number and this should be a string all right so this is where generics come into play what we can do is we can say angle bracket T at the frontier of our arrow function and so T is a variable name basically commonly you'll see it as T but you can call it whatever you like you call it element for example you could use a longer name let me use T that's a lot of times what you'll see and so what T stands for is did generic type that could be passed in TOR to our function so I'm going to say this generic type here I'm going to use that here I could also do that as well those are equivalent so what this is saying is I want to take a generic array I don't know what the type is ahead of time and so if we hover over this now our function takes a generic type T and it returns the T u type so it takes an array of T and it returns T so now if I hover over last here you'll notice T is filled in in this case number is what the generic type is and if we look here string is filled in and you can see the string is the generic type so what that gives us is now when we call last on an array of numbers we can see the value is a number and when we call it on a string array it's going to return a string back and so you can see here's where generics can help us get more type definition or cover our code better and we can see that typescript also inferred what the value was I didn't have to say that this took in a stray of strings it knew just based on this it was available able to infer it but we can explicitly say it by saying string array right here or well in this case we said this should be a single T and then we said that value is going to be an array there so actually this should just be string all right so I can explicitly say what the data type is or what the type is of my array also note I didn't it's inferring what the return type is or returning T we could explicitly say or returning T as well so that works as well okay so this is a basic example of using generics let's look at another example taking this to basically next step all right so here I'm gonna make a function called make array and so what make array does is again we can start with the non generic version is all I want to do is take some value and return an array of it all right so here I have X as a number and it's going to return an array of numbers all right so now this is gonna return me an array of numbers and I pass five in but now I'd really like to get this to work for a string value right I pass in a I want this to return me an array of strings so whatever this type that I pass in I'm gonna return that type but in an array form so what that look like here well in our make array we can make it generic can duty pass the value of T here and then it's gonna infer that we're returning an array of T here so now you can see this is a number array and this is a string array now again we can explicitly say the return type we're returning an array of T here if we like but whenever I'm doing this I don't usually say that I just let typescript infer it if it's already correct so we're not constrained to just using one generic type to so for example you can have a second one here so here maybe I want to say T and we'll say Y is our second one so I have X here and say wise of the type Y alright and then we're gonna return X Y okay so I'm gonna say five six a B so we can see I passed in two integers or two numbers and our type here is a number and the type here is a string with two strings now what happens if we mix us so if we do v3 you can see that I have both a string and a number in here and if I hover I can see we now have an array of unions so it's either a string or a number and we have an array of them so it's pretty cool but let's say I didn't like how the inference worked you'll notice that we're returning an array here but really this is not an array this is more of like a tuple I'm just returning an array with two values so what I could say here is this returns a tuple T Y also let's rename this to X so it matches better all right so we're taking two types X&Y that's going to be our two params and then we return those two params in an array so if we hover over this we can see that we have string comma number now if we don't like what the generic type inferred for example this was a string I can overwrite it like I did before so string number but let's say we will want to have like a value that's either a string or null this comes up a lot so you could do something like that so the first value could be a string or null so in this case it could pass Nolan to there as well all right so that is how we can explicitly write the types here now let's say we for some reason only one to explicitly say what the type of this first one was you know it's gonna get mad at us because it says expected to type arguments so this matches here and then what is the Y type argument we didn't pass that in well we can either a pass that in right like put the value number that I just did or we can actually set what the default type is so by default let's say I want to say this is a number all right so now if I hover over you can see it's a string or an all common number can also have have this set to any is usually how you see this as the default value but this is basically the default value of the type if none is specified so yeah if we don't specify default value we have to put both of these if we put a single one so we can either not override it at all oops and it's gonna be happy or if I start overriding the first value I'm gonna have to override the second type argument as well if I did not pass in any optional ones up here all right so we went over doing two generics how you can set the return value overriding inferences in the default values of type arguments let's go to extending these types so let's say I want to constrain what the user can actually pass to the function to the generic all right so let's say we have this function called make full name and what this does is it takes an object call it and what it's going to return is the object and it's going to also do object dot first name plus object last name so what my function does is it takes an object it keeps all the values that already in that object and then adds a new one called the full name it also expects that the object has the first name and the last name properties inside of it so basically I want to constrain the object to have these two values at least so one thing I can do is maybe do an object and say first name is a string last name is a string all right so that is one way you could do it and if we look at what gets returned here you can pass in an object like this and then it's gonna return those three values so we have our v4 you can say make full name you can pass in the first name Bob last name jr. get pass it in like that but what happens if I want to accept objects that have these two properties but maybe more so like maybe it also has age which is 15 all right so now it's going to get mad at me it's gonna say age does not exist on this parameter so how can I allow any object to be passed into this function that has at least these two fields well that's when we can do a generic so I can say T and the value of object is now T but I also want to put some constraints on the generic type I want to say this generic has at least a first name and a last name field so what I can do so I can say extends an object which has a first name of string and a last name of string all right so basically I put some constraints on what this type could be possibly be so what that means is this works but let's say I have I don't know another right we just pass it another field and we don't have a first name in a last name in this object so it's gonna say there's some kind of problem with it and the cool thing about this is if we hover over our V for now we can see that there's an age property a first name a full name in the last name so it correctly kept all the properties on the object and added a full name property to it so that's pretty cool all right so that is how you can use extends now you can extend other things besides objects but personally I tend to do objects the most in this kind of scenario but just note you can also do it for other things as well all right so we did that let's also jump into interfaces and how you can do generics with an interface all right so I have interface and let's say we have a tab so our tab can have an ID which is a string in a position which is a number and then some data and we don't really know what this data could be maybe some tabs we want to have one value and another tab we want different values so this is another one where we could either put the word any or maybe we want to take a generic so if we want to take a generic we can use our angle brackets right here and then the name of the type so I'm going to call it t I'm gonna pass the T in there and then here I can say number tab is equal to tab t I'm sorry tab number and this should be typed there we go so this is me creating a new type which we can see is a tab which is number so this is equivalent to me saying number tab and then putting the word number here so these two statements are equivalent and we just basically are inserting the number in where the T value is so now for my type here let's say I want to do a string tab now so I'll do that and we can do that and now we can easily create different types of types this way so this comes in handy when you kind of want to make a few different types of types that inherit from kind of a base like this and so and there's like a generic type that we want to pass in so that's another option where you can use generics with types to create new types all right so now I want to get into some more practical examples I'm gonna be focusing on react because that's where I tend to use it the most so we're gonna start with props so in react if I want to create a component hello world I say react dot F sea and then I create an interface called props and maybe I say name which is the string right and I put the angle brackets here so this is a case where react created type definitions or interfaces where they take a generic and their generic is what the props are because the props are going to be generic they don't know ahead of time all the data that you want to pass into your component so in this case we can say we want our component here to take a name and now we get type definition for the name there and we can return a div you can say hello a name right so that is where generics are used in react another case is if you want to say you state so this is a hook and react so here the argument is a generic so I can pass in say an object which is named which let's say is a string so if I hover over this now well this is kind of a messy one you can just do state say state name is available but if I change this to full name name doesn't exist anymore and full name is there so it knows that because you state takes a generic and I can overwrite that generic by putting brackets here so this is where it's good to know how the overhang of generics work where you can actually explicitly say what the value is because maybe I really want to say the full name can be a string or it can be null so you can do something like that and now we've explode explicitly said what the type of this parameter is okay so that will come up when you're using hooks and then lastly I wanted to go over generics when using like JSX or components so this last thing I use sparingly but it does come up now and then so let's say we want to create a form component we're going to call this form and which call form and this is something that I saw for mcdu so basically we want our form component to take and we're gonna call this interface form props some values now each form is going to have different values in it so I want to make this actually a generic so I'm gonna say T oops so use our angle brackets here to say this interface takes a generic T value and this has some values in it now I'm not going to do the FC here because I want to actually make this a render prop so what I'm going to say is this also returns some children so we're going to say JSX element and we're gonna pass down the values which is the value of T so what this allow you to do is now in our form here we're gonna say form props and now we need to pass in what the value of this is and that's where we're gonna use another generic right here so this is how we can you make our react component use a generic so now here I'm gonna say extends an empty object because we want it to at least be an object that's being passed in also just good to note this doesn't seem to work if you don't extend something here all right so now here let's say I have values and children I can return children and values alright so what does this guy do at the end of the day well let's actually try rendering this so form and I said this was a render prop and let's say we want to have a div here that says hello alright so the first thing you'll see is it tells us we need to pass in a values here all right so let's say values is a first name Bob all right so this is my value that I want to pass into my form and now the cool thing is the values here you can say values dot and now you can see first name shows up here and now whatever value I pass into the values here last name it's now gonna have that same set of properties on the parameter that we get here so now we get last name so that's how I put like libraries like for mcdu it where you're able to get the same type as was passed in here now typescript again is inferring this type we can actually explicitly override it by putting a bracket here and we can say last name is a string or maybe it's null right so now we've over I did what the properties are so this is how you can do generics and JSX so here we have our angle bracket and so this is where you put your angle bracket if you're doing JSX so you stick it right there right after the name of the component and then you put your type in there so in my case it's an object which has a last name which is either a string or a null so then we could pass in null if you want to here and again because we explicitly said the type what the type was here it's gonna tell us hey that doesn't line up you said there's a last name which is string or null but you didn't pass it in so now we can enforce that so there you go that is an introduction into generics hopefully that helped give you a few ideas of how you could use them in your code and how you can use them and react

Channel: Ben Awad

Views: 112,718

Rating: 4.9753613 out of 5

Keywords: typescript, Generics, Typescript Generics

Id: nViEqpgwxHE

Length: 21min 56sec (1316 seconds)

Published: Mon Aug 26 2019

Reddit Comments

[u/thelordmad]

Nice, thanks for the video. Good job explaining and I think the video was pleasant to watch. Remember next time in the end that onscreen video recommendations might block the code. :)

[u/benawad]

I start with the basics of generics and then get into how to use them in React.js.

If your only interested in the React.js part you can skip to this timestamp: https://youtu.be/nViEqpgwxHE?t=937