Intermediate React Intermediate React

Converting the App to TypeScript

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

Convert the Details component to TypeScript by including the reach router type definitions and code defensively against variables that could be null or undefined in order to satisfy TSLint and TypeScript.

Get Unlimited Access Now

Transcript from the "Converting the App to TypeScript" Lesson

[00:00:00]
>> Brian: All right so let's go do another route. Let's go do details.js. Here. Why is this upset?
>> Brian: One more thing.
>> Brian: Why is this still in preact compat.
>> Brian: That's interesting.
>> Brian: Okay, good. It's in a weird state. So should be good to go now here in details.js.

[00:00:53] So I'm gonna come in here and rename details.js to be details.tsx.
>> Brian: Okay.
>> Brian: So, a couple of things up here.
>> Brian: So up here from pet finder client.
>> Brian: We're gonna import, some types. So pet finder client exports some types that you can use, so one of them is gonna be pet response.

[00:01:34] And one of them's going to be called PetMedia. Now what's cool about this, notice that it knows PetMedia already exists on there that's because I wrote the TypeScript definitions for you and it can read those TypeScript definitions. And those are already available to up here.
>> Brian: And then here it's gonna enforce some more safety on us so we'll get there in just a second.

[00:02:04]
>> Brian: But notice it's already made a bunch of errors for us. It's like hey this isn't public or private. You need to make that public or private so. These ones we're going to say state is public, because it can be modified by React. This is gonna be public.

[00:02:21] These are gonna be public. So, that solves some problems. So hey, you have ID and I don't really know what ID is, where's that coming from? Well, you have to tell React what its props that it expects are. So the way that we can do that is-
>> Brian: Through this thing called route component props.

[00:02:51] So what we can do is provide React ways of knowing what types are gonna come in. Because this is a route, we need to tell it that hey some of these props are gonna be coming from each router. So we're gonna tell it's gonna come from route component props right here.

[00:03:12] This one at the top. We're going to click that. Imports that from reach router and the one coming from that is gonna be an object that looks like this. And it's gonna be an ID and string. So let's deconstruct that a little bit. These are called generics. So a React component can have various types of props and strings.

[00:03:39] It's flexible in that sense, right? And then from reach router. If you remember in our app.js. The ID here is coming from the route. So we have to tell TypeScript expect this ID to come from the route. Getting a little bit toward some advanced type scripture, but this is gonna be super helpful for you.

[00:04:02]
>> Brian: So getting back to details.tsx we're telling it hey, expect the ID from the route.
>> Brian: Okay, so that's where that comes from. So now you'll notice down here where it was erroring out and said hey-
>> Brian: Where's the ID? Right here. Now it's not erring out an ID, right?

[00:04:25] Now it's like, I know where that comes from. It comes from each router.
>> Brian: So a bunch of this stuff, it's gonna say like, hey, this isn't any type. I don't know what this is, so you have to identify a bunch of these other things. One thing I was going to show you here, while i'm thinking about it.

[00:04:42] There's a browser extension for TSLint, that you should install it if you're using VS Code, this one right here, the TSLint one. That'll show you in your VS Code instance right away, here are your errors. Okay model.tsx. No sorry, details.tsx. So it's gonna say here hey process.m.api key.

[00:05:12] I don't know like that might be undefined. That might not be there. What happens if someone starts this application without process.m.api key? So you have to do, again, a type refinement is like if this doesn't happen, stop the application. So if I try and build this without process.env.API_KEY, or without process.env.API_SECRET,

[00:05:42]
>> Brian: Then throw a new error, no API keys. So now, at this point, TypeScript knows that, hey, if I get past this point, I know for a fact API_KEY exists, and I know for a fact API_SECRET exists, so I'm golden at this point. So that's what this type refinement is doing.

[00:06:05]
>> Speaker 2: Also yes, if this stops props.id?
>> Speaker 2: Not this stops props completely? Yeah.
>> Brian: Yeah, I guess that's what you would have to do. So if it doesn't pass it I guess if they don't pass in anything, you would not do this request, right?
>> Brian: Sometimes you gotta give it a little bit of a kickstart.

[00:06:44] Nope.
>> Speaker 3: We did a return.
>> Brian: Just return?
>> Speaker 3: Yeah. Can [INAUDIBLE] all of this?
>> Brian: Yep, it does. It's quite sophisticated with that stuff.
>> Brian: There we go. So now at this point, it says like.
>> Brian: I know for a fact that ID's gonna be there. So you can see here, this question mark right there.

[00:07:10] ID question mark means it might not be there, so you need to handle this night null case.
>> Brian: Okay.
>> Brian: Next thing.
>> Brian: Inside of Pet.get then.then. Up here you're gonna say hey, if they don't come back with data.petfinder.pet we need to handle that case. I'll just say navigate to slash.

[00:07:46]
>> Brian: And then return.
>> Brian: Exclamation, there you go. Now it knows, it's like, okay, I know pet's there. So then it fixed all those errors. So this is a common thing for me with petfinder. Sometimes I kind have to massage and fight the types a little bit before they're like, okay, now you got it.

[00:08:09] Right? But now I'm guaranteed this ain't gonna crash, okay? As long as this comes back as a pet response, this is not gonna crash. And now, this one is upset. What are you upset about?
>> Brian: Cannot use JSX unless, class new. That's what it is. In your tsconfig.json, jsx right there.

[00:08:48] Yep, uncomment that one and say-
>> Brian: React, you have to let TypeScript knows like by the way, I'm doing some React stuff in here. So that's line nine in here in your tsconfig.
>> Brian: Okay? So now going into details.tsx, now everything's okay with details.tsx. Okay, so far so good.

[00:09:24] Nailing it. [LAUGH]