Check out a free preview of the full React and TypeScript course:
The "Generics Solution" Lesson is part of the full, React and TypeScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve live codes the solution to the Generics exercise.

Get Unlimited Access Now

Transcript from the "Generics Solution" Lesson

[00:00:00]
>> So let's see if we can implement this. Again, it's a mouthful to say. But if we kind of look, what we wanna do is effectively get the types working on this appropriately. And this is again, it's saying we have this idea, it's an array full of a given item.

[00:00:14] We're gonna work through each one of those items, what type is that item? And then we can use that to plug it in to the rest of the function. So we can kind of say that we could have, We have this idea, we'll have a function called tap.

[00:00:32] And there's some kind of value that we're working with. I don't know if it's an array of numbers, an array of strings, an array of objects, and frankly, we don't want to know yet. We wanna be able to make a function that can figure out what's going on, and then work for any given types.

[00:00:48] But it still says, okay, I can still consistently figure out what's going on here and still be flexible at the same time. So we could have some kind of argument, we'll just say arg, because argument is a word in JavaScript. And that argument is gonna be of that type.

[00:01:05] Whatever that type is, it's going to be an array of that type, or actually just that type in general. Here, we're using an array, it's actually natural. It can be any given thing. We're gonna say that type whatsoever. And so we're gonna have this idea of a variable type.

[00:01:25] The argument is gonna be of that type. The function, which is kind of the callback function here that we're using over here, is going to be something that takes that type, and returns that type. Actually, it returns void, right? Cuz this is something with a side effect. It's like a console.log or something along those lines.

[00:01:47] So tap takes a type, passes that type into a function that doesn't do anything with it, and then eventually, returns that type back to us. And all we're gonna say is function with that arg, Return the argument, right? So now, this tap function can be used on any type of argument, and it will plug into what T is.

[00:02:11] It's like, cool, all right, but if you pass me a string as the argument, you better pass me a function that takes a string. And I'm gonna give you back a string, right? We're just saying this type can be anything, but for whatever it is, it has to be consistent, right?

[00:02:29] So it's a little bit more flexible than hard-coding in a type, but you're not putting any in there. You're simply saying, be flexible but consistent, which is kind of a model for life. One thing to kind of look at too, as we saw this before as we were working on stuff, which is the identity, it didn't give me back a type of number.

[00:02:50] It gave me back this type of two, which is very specific. It's only const two that can only be the number 2. That actually makes sense here as well, if we actually change this to let. Now it can be any type of number. TypeScript was smart enough to figure out if you have a const of too, then it will always be 2, cuz you can't swap it out with another one.

[00:03:12] Arrays, however, you could push additional stuff on top of it. So you can have, right, this is just an array of numbers because you could push additional numbers on here. But if you use this other as const, as you can see right here, it will make it a true constant.

[00:03:28] Basically, now it's a read only, you cannot push additional things on this array. So it's just one thing that we kind of came across as we were looking at identity as well. But that's the high level of generics. Clearly, there's a lot more generics that are incredibly powerful.

[00:03:40] We're gonna look at a bunch of utility types in a second here that effectively harness the power of that to do very sophisticated things. And like I said, there's obviously more can go into this. We just need to know just about enough that we can work with some of these more advanced component patterns a little bit.

[00:04:00] But first, let's take a look at some of the utility functions, either A, built into TypeScript, or B, built into React's types that we might have to use with React components that are outside of TypeScript per se. But obviously built on top of the ones that are built into TypeScript, but also allow you to work with different components.