Create Your First Generic in TypeScript
Generics can be intimidating when you first come across them if you're unfamiliar with typed languages, but once you wrap your head around them, they're as simple as using a variable in JavaScript. This lesson walks through when and why to create a generic and how to use them in TypeScript.
Instructor: [00:00] Generics most often appear in utility functions. I'll write one called fill. This function is going to take an array and then fill it with whatever value I pass in. Because it's a utility function, I don't know what type this value's going to be. It can be any type. I'm certain that fill will return an array full of values of that type.
[00:27] The implementation, which doesn't really matter but we'll write it anyway, is just array map and then just return that value. What the typing would look like is the value as a type of I don't know. I don't declare that type. I actually set that type as a generic right here where I say I don't know.
[00:51] We don't really declare this type anywhere. We just say up here that this function's going to take a type that I don't know about yet. I'm also going to define this array as an array of any value. The syntax is just any and then the brackets. Then the return is going to be an array of I-don't-knows.
[01:15] I can use this just by saying result is fill this array of one, two, three with the letter A. If I click on fill, you can see the definition is now fill string, take an array of anything or the value as a string, and return an array of strings.
[01:34] TypeScript would allow me on my result to say something like map. It knows these are strings. I could say x. something like Two or two because it knows that those are strings.
[01:48] If I already used this in another way, this time we'll just say values. Then I can fill an array of a, b, c with the value of four. Now when I look at fill, you can see the definition is number. The value is number. It's returning an array of numbers.
[02:11] On values, I could map and say x divided by two. TypeScript wouldn't complain. I couldn't say x.Two. I only have the two methods available on number. If I said Two, it would say, "That's not available." In my results, if I try to map on x and say x divided by two, it's going to say, "I can't divide a string by two."
[02:42] I'm giving my code enough information to know what I can do with this result. It's inferring this type from whatever I pass in here and then using that type throughout my function. I could use it inside the implementation or inside a parameter or the return value.
[03:01] Typically what you'll see this as by convention is just the letter T, like that. If you're ever confused by the letter T before, that's just because it's like saying foo or X. It's just a type I don't know about yet. Then once you do know about it, you get a lot of awesome information about what you can do with the result of that function and what comes from it.