This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Transcript from the "Generics Exercise" Lesson
[00:00:00]
>> All right, so one of the one of the questions we got a little bit earlier was, how does this whole TypeScripting work with some of the functional programming paradigms? So JavaScript, again, this is where the generics become super useful. For instance, a lot of the things that we know and love like map or filter, any of those functions, think about the fact that lodash should still work with TypeScript, right?
[00:00:24] And we don't want to have a map for every single different type of array that could possibly ever exist for every different kind of object shape or anything along those lines, and we don't want to use any. And that's like a place where the generics help, right? So we used it for creating a linked list node.
[00:00:40] I think about some of the common functional programming paradigms like, the easiest one is identity. Identity is a function that just returns the same Type. Now, shouldn't have to have an identity function for strings different than identity function for numbers or anything like that. So we just say, hey, we're gonna have a type for this identity function that is somewhat variable, right?
[00:01:01] And we say like, I don't know, value is of whatever type that is, and we just want to return it back to us. It's all an identity function does is this, it takes whatever the value is and immediately returns it. And again, whatever, so now we can do, two, identity is two, and because you pass in the number 2, this identity is now, this one is set to literally the number two, or a string or it'll basically on the fly, figure out the type for us.
[00:01:34] And again, all that figuring out stuff that was happening magically happens through these generics as well. So what you're going to try to do and you can do this in the kind of TypeScript playground as well. We have this idea of another function called tap and tap is super useful occasionally.
[00:01:55] What tap does is there are different things in JavaScript that don't return the value back to us, like pop, gives us the first number. If you just wanted to pop a number off but then get the value back immediately, you might find yourself like okay, store in a variable, pop something off, return the original variable.
[00:02:12] So tap can look something like this. This one is obviously not typed where we want to pop something off on the end of the array, but we'll use tap, pass in an array, say what we want to do with it, will immediately get back the tooth, the 1, 2, 3, all right?
[00:02:30] I use it a lot for, especially in JSX. Any of the expressions that you put in a react component have to return a value. So a lot of times like, I don't know why something isn't working. I wish I could console log this, except you can't console log inside of JSX and get the value back.
[00:02:50] So you end up doing stuff with like, and stuff like that. So you could have one where you'd have a value, we say tap value. This would, in your JSX expression, take the value, console log it for you and then return it again. So you don't necessarily have to change any of your code.
[00:03:11] So a lot of times I'll abstract this into a log function. It's just a utility method to help me debug. Your job is to take a basic version of Tap, and again, and implement it with the types, right? So we know that, okay, what is the type of thing we're passing in here?
[00:03:36] And then we know that this function, with kinda think about if we, we know that the first argument is an array of a certain type. So it might be, a given type, and then we know that over here, we're just gonna pass in a single version of that type into the array, have it come out the other end.
[00:03:59] So what we wanna do is figure out a way to implement this function, right? Just give it a shot where you can kind of see what we do here, identity, we're gonna take this, and we're actually the full way. If we looked at it here as well, we look at an identity function, right?
[00:04:13] We know that we're gonna have a type variable called T, the value is gonna be T, we're going to return it. Tap is going to be a little bit more complicated. But your job is to create a version where, takes an array of a given type, takes a function which takes that type and returns that type.
[00:04:32] And then it returns the array of the given type again, all right. So it's a little bit more advanced than identity, but why don't you give it a shot and then we'll do it together in a second.