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

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

Brian demonstrates the power of TypeScript in a fully typed React application.

Get Unlimited Access Now

Transcript from the "Wrap Up Typing & Q&A" Lesson

>> Brian Holt: It's a bit of an effort, right? But hopefully you kind of see the process where you just kinda work your way up your tree until you arrive at App.tsx. If you wanna see what now what happens if we run the compiler and say hey, check my project to see if it works.

[00:00:15] Hopefully, we will see no errors here. We do, this is now a fully TypeScript project that you can continue forward doing TypeScript. And again, anywhere inside of this application I can just mouse over and say what is breeds? I don't know what that is. It's a list of strings, right?

[00:00:34] And if I try and do toUpperCase on this, it's gonna say whoa, whoa, whoa. toUpperCase does not exist on string. Now that's kind of trivial, I defined that, where I do find it quite useful is like, hey, I don't remember the name of what's on React. So I can just mouse over that, I was like, figure out what's in there.

[00:00:57] And I can actually click into it to figure out what's into. So if I command click on this, I can look at the type of definitions for this. So this is the one that I actually wrote. So for example, if you try and say a size that's incorrect, these are the only different kinds of sizes.

[00:01:13] Remember what we did pn for the size here? But there's also a thumbnail size and things like that. This is the only file valid values for that. They probably enumerated type. So there's so many different ways to TypeScript as easily to, this is just the beginning. I just wanted to get you into it and doing TypeScript with React cuz I think it's a really important skill to know how to do this.

[00:01:39] I think we're gonna be seeing more and more types of these as we go forward. So that's my spiel on TypeScript. Any long-term project that I personally start is gonna be done in TypeScript. If I'm gonna be doing just little minuscule things, like one-off things, I might not use TypeScript, you can see that it takes more time.

[00:01:56] But anything that I'm gonna maintain long term, I'm gonna write it in TypeScript.
>> Brian Holt: Any questions? I get that feeling, yeah.
>> Speaker 2: Kinda random, but when you had your sidebar open, showing the little file names and the little associated icons, I'm noticing that tsx shows React. Is there some kinda special connection between TypeScript and React, or I don't know, maybe why would that logo be that way or?

>> Brian Holt: Well-
>> Speaker 2: Look at the x.
>> Brian Holt: Right, it's the x. So you can see here next to searchcontext.ts, it's just showing the TypeScript logo, right? So as soon as you add the x, it's like this is a React file. I know what to do with React. That's how that shows up.

[00:02:37] That's just built into VS Code. Sublime can do it too. I know, I used to use Sublime. So that's just a configuration with Sublime. And I think, yeah, this just does it out of the box with TypeScript. Yeah, thanks for coming. Thanks for people in the live stream.

[00:02:52] Thanks to those who are going to watch the video later. But not, not these people here. You all can just leave. [LAUGH] No, I'm just kidding. Thank you all, though. Everyone's here. Thanks to Frontend Masters. And yeah, we're done.
>> Audience: [APPLAUSE]