This course has been updated! We now recommend you take the Intermediate React, v5 course.

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

Brian gives a type to the React Context API, and demonstrates how to tell TS that there is a strict ordering of string and function to make other files easier to type.

Get Unlimited Access Now

Transcript from the "Typing Context" Lesson

>> Brian: So let me show you something else that's really useful. If you just hover over something like this, it'll give you the function definition. But if you actually Cmd+click on it, it's gonna take you into the type definition so you can see exactly what's in here.
>> Brian: So this gives you back,

>> Brian: A S and Dispatch<SetState. So it actually doesn't have a specific type of what it does. Okay, that's good to know.
>> Brian: Yep, same thing. So what I'm looking at here is after this colon here, I was trying to see if hooks had a specific type they returned.

[00:00:39] And it just tells you, no, it returns an array. So we just have to type that.
>> Brian: So this isn't quite correct, yet. What we want this to be is, this createContext, is going to be, and we're going to give it what's here called a type parameter. And it's gonna be a string.

>> Brian: Array of string and a,
>> Brian: Theme: string, and this returns to you, void. So it doesn't return anything, okay?
>> Brian: The other thing we forgot to. We have to rename ThemeContext to be .tsx.
>> Brian: You also gotta name this .ts cuz there's not any JSX in it, but I just rename everything TSX at this point, so.

>> Brian: Okay, and that's all we have to do for this. What this is doing is this is telling createContext what kind of thing we're gonna give it, right? And we told it we're gonna give you a string, right? And we're gonna give you a function that takes in a string and doesn't give back anything, right?

[00:01:59] Which is what this is. Make sense? It's like a parameter to a type.
>> Speaker 2: It's not like that