Loading
Current section: 6. Generics 5 exercises
solution

Generic Types

Transcript

00:00 Okay. So generic types and interfaces. So we're going to create a loading, state type that, represents status, idle, loading success, error. But the success state is going to have some data. We want this to be generically useful.

00:16 We want to be able to use this loading state for loading any kind of data, whether that be, a list of movies or a particular task on your task management list. So, by making this type of generic, it can be generically useful for a lot of different scenarios. So let's make that, loading state type. The way that that works is you, define your type, your loading state, and, all of this stuff we're familiar with from the unions and things. The difference here or the addition is this, angle bracket that we add to specify the generic, options that we have.

00:52 So or the generic types, that can be passed when creating an instance of this type. So you can really think of a generic type as like a function for generating types, and that will become more clear when we actually use it here below. So here, we're gonna take that data. And then inside of the type definition, we can reference that data anywhere we like. We could put it, previous data.

01:16 And now, if we had a loading state with previous day, maybe we make it optional. And you can have that, reference there as well. So it can be quite useful for, making types that are generic. So let's now, create a function that, uses this generic as the, return type. So we're gonna have a function that we can use to create objects, of this success state.

01:43 So that is going to take a that's a function that's actually a generic in itself, and we're going to accept data that matches that, the type. And so we're going to derive our generic data from whatever we're being called with, and that's going to give us back a loading state, with that data. And our our particular loading state will be success, and that will have, the data. We can also create an error. And in this case, we're actually not using the data generic and so we, could get rid of this.

02:14 You might think, oh, we could just get rid of this. Unfortunately, for us, the data is actually required. And, now that I think about it, I don't think I, show you how to handle that case. So you can actually say unknown as kind of a default, and so now it's not required. It's it's very similar to, default params or default, object or, like, object destructuring, that sort of thing.

02:40 Okay. Great. So we could do it with by specifying data, and then, that will end up being unknown anyway, or we can have it default to unknown, and that works just fine too. Okay. Great.

02:52 So that takes care of that. And we can console log these and make sure that that's gonna work. Here, we don't need to specify the user. In fact, we can't because it's this isn't a generic function anymore. And we can see our, user state that's going to be a loading state with the generic data being ID number and name of string.

03:12 Cool. And that comes because of this. And if I were to make a change, to have an email, then, our generic or or our user state that comes back will be a loading state that includes that email also, which I think is pretty neat. So then we end up with the object that has success or status success and then our data that we provided. So the the whole point of this exercise was just to show you what the syntax for a generic type looks like with that, open, angle bracket.

03:43 And then we can, also even default, that type in case it's not provided. And we don't provide it in this case, but in here, we provide it. And that value actually comes from a generic function. So these all kind of flow in together. Alright.

03:59 I think that is everything you need to know. So great job on that one. We'll see you in the next.