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

Brian refactors the ThemeContext component. An APIResponseTypes component is also created. This response type component can be imported anywhere API responses are being consumed which ensures proper type checking of the server data.

Get Unlimited Access Now

Transcript from the "ThemeContext" Lesson

[00:00:00]
>> You can see the state of the project now at typescript-1. I think there's through 5, let's make sure that that's the case. Yeah, typescript 1 through typescript 5. All right, let's keep going. Let's do ThemeContext. This one's not too bad to do. Okay, kind of a side note, a pause here for me to kind of, I've done a lot of migrations on my career.

[00:00:31] People pay me a lot of money to do migrations in my career, I feel like I've wasted a lot of my career. That's it, that's the whole statement. I'm just kidding. The way I go about doing migrations and specifically typescripts migrations is that I try and start at like the leaf nodes, right?

[00:00:49] The things that are the furthest out. If I tried to start my migration with app.js, it would be a nightmare because everything is dependent, right? And so you would kinda have to go through this entire project of trying to basically boil the ocean all at once and that's bad.

[00:01:05] You don't wanna do it that way. It's much better if you start at something like ThemeContext where it does not dependent, right? Everything imports ThemeContext, ThemeContext is not importing other things if that makes any sense to you, right? What's nice about this is that I can finish ThemeContext right away.

[00:01:26] And now, everywhere that it's being imported will have those types but I don't have to go type that file to make it useful. This just makes it easier and it makes it so you can have quick wins, and I'm all about that serotonin. All right, so here in ThemeContext, we have to just tell it what type of context we're going to be creating here.

[00:01:51] So first of all, rename this to be ThemeContext.ts. You could make it tsx, there's no jsx here so that's totally up to you, I don't care either way. Okay? And then here we're gonna tell it that the kind of context that we're creating is gonna be Hook shaped.

[00:02:13] So it's gonna be a string and then it's going to be a function that's gonna take in a theme which is a string and it is going to return nothing which is void, okay? There's again many ways to skin this, I actually just typed in literally here what a Hook looks like.

[00:02:39] I think you can find a way to make this actually know that it is specifically supposed to be a use State Hook but honestly this is fine, this works for me. So it's now a react context that specifically gonna take a array of two things, if you try to give it three things, it won't be happy about it.

[00:02:55] The first one is gonna be a string and the second one is going to be a function that takes in a theme and returns nothing. That's it, that's the whole thing. Congratulations, you did ThemeContext. Okay? Let's move on to the next one. So frequently what I'll find myself doing is I'll make a file of useful types and sometimes useful types will break down further into many files of useful types.

[00:03:26] And a really good example of when you wanna do that is with API responses, right? Your API response doesn't come with types. There's no way the typescript would have a concept of like, I'm gonna call this API and this API is going to give me back these things.

[00:03:40] So you have to tell it, here's what I expect to get back from the API. So I want you to make a new file here and you can just call it something like API responses types. I call it responsestypes.ts, okay? And then here I'm gonna export a type Animal, and this is gonna be what you would call it an enumerated type.

[00:04:10] An animal can be either a dog or a cat or a bird or a reptile or a rabbit. So now if I try and say, I don't know somewhere else I say, this is an animal and I say animals now equal to goat. It's gonna be, I don't know what that is, I'm not gonna let you do that.

[00:04:36] But now I can assign to say, all right, this thing is an animal and it's a bird and types can be cool, I know what that is, right? It limits the types of strings that can be in there, aka an enumerated type, which is kind of fun, okay?

[00:04:51] So this is a type and then we're gonna make these down here interfaces. So the pet interface is gonna be what kind of pets we get back from the pet API. So it's gonna be an ID which is a number, it's gonna be a name which is a string, it's gonna be an animal which is as you might have guessed an animal the one that we just made.

[00:05:15] Description string, breed string, images, it's gonna be a string array. A city string, state string. Okay? So now we have a pet type that we can throw around anytime we get back a pet from the API and we know it always looks like this. Okay? And then we have one more thing, we have a pet response.

[00:05:50] So we're gonna do an export Interface, PetAPIResponse. And that is a number of results which is a number. A start index which as a number. An end index which you may have guessed is a number. hasNext which is a Boolean and a pets which is a pet type array.

[00:06:24] It's an array of these things. Cool, now we have this file, we can now import this anywhere that we're calling the API, right? So we could call the API in two different places in our application and now we get to share this type so we don't have to retype it every single time that we do it.

[00:06:44] We made animal type instead of an interface, this confuses people a lot and it's kind of preferential. Though I will say that as far as I know, the types community strongly prefers interfaces over types. But I'm just gonna say to some of the answers, that really doesn't typically matter.

[00:07:02] Usually they're close enough that it doesn't really matter which one you're choosing. I'm not gonna speak too much more on that cuz I really don't have a strong opinion on it but generally interfaces are tend to be more flexible and fit more places that you're gonna want them to.

[00:07:22] Whereas types are much more strict they're like, this is you know all this can ever be. Whereas interface has some composability and some other fun tools you can do with them and I'll leave it at that. If you want more in depth and explanation on that probably check out Mike's course because Mike will go into that more than I will.

[00:07:44] In other words, you can't please everyone. Again, more of life advice with Brian, can't please everybody.
>> How would you go about typing if it was a nested object?
>> If it's a nested object. I believe and again, this is off top my head. It looks really familiar, right?

[00:08:14] It's just really just objects syntax. Generally these nested objects tend to be another type that you can pull out, right? Which is precisely what I did here with pet API response. I could have basically just copied and pasted this whole pet thing here but now I get to use pet and pass pet around.

[00:08:30] And I can also say that this pet API response is a pet array. So I try not to nest a ton. Semantically nested objects tend to be a thing, right? So let's say like a location thing here and inside of that location was this, I probably would make a location type, right?

[00:08:57] So I would say or an interface export Interface Location, I'd put these here and then I would say location is a location. It's not a hard and fast rule cuz in general don't believe in hard and fast rules when it comes to coding. But now if I ever pulled out this location and I start passing it around to different files, I don't have to retype it again.

[00:09:25] I can just say okay, this is a location that came from this type, right? So personal opinion there but it's a good one, it's a good opinion. Yeah, Mark.
>> They're saying that instead of fizz buzz or foo bar people should use LOL and WTF.
>> Indeed, yeah, hard requirement.

[00:09:47] There's another favorite is obviously barbecue, OMG very important, yeah? That's just solid computer science I think [LAUGH] yeah, definitely. Yeah, I don't like foo and bar, at least LOL and OMG make me laugh.