Intermediate React, v2 TypeScript Introduction

[00:00:00]
>> Brian Holt: So let's just talk about TypeScript for a second. First of all, this is going to be specifically how React and TypeScript intersect. So while I'm going to be explaining TypeScript as I go, there is a full TypeScript course from Mike North on FrontendMasters and Mike's a great teacher.

[00:00:16] I used to work with him at LinkedIn and so if you need like a more in depth introduction and delve into that Mike's course is a great place to get started. So what is TypeScript, why do I wanna use it. Why is it useful with react this answer some of those questions.

[00:00:35] So if I have I'm just gonna open a new file here and closes for just a second. And I'm gonna put this in, Change Language Mode, TypeScript.
>> Brian Holt: So if I have a variable here that says var x = 5, right? And then I say, x.toUpperCase(),
>> Brian Holt: Now, normally JavaScript's like cool, I'll give that a shot.

[00:01:08] Like you have no idea if that's gonna work or not, right? You and I can see right away that this is a number and this definitely doesn't have a two UpperCase, right?
>> Brian Holt: But TypeScript is gonna yell at you and say hey, idiot, like number doesn't have a two UpperCase.

[00:01:26] Now this is a very simplified case, right? But this is going to save us from run time production errors because of types, right? Now what I could do here is I could say that and all of a sudden, okay that's a string, that's gonna work, right? So these are the kinds of things that types of going to save you from.

[00:01:51] It's gonna save you from calling to application a number it's gonna save you from calling toUpperCase, right. That's an easy one to do but it's gonna say hey, toUpperCase isn't a thing. Did you mean toUpperCase I did, thank you. And you can actually say, change spelling it will just fix it for you.

[00:02:15] Like there's some pretty cool stuff like that that TypeScript can just do for you automatically. But in my opinion, one of the better parts about this if I just say x dot, right I don't even have to look at MDN anymore. It just immediately appears in my editor.

[00:02:30] It's like hey, let's do split and then well, I need to figure out what the splitter is. Let's do /, right, and then I'm gonna do, okay, how many of them do I want to do, right? And it's giving me in line documentation as I'm writing code, like that's magical right.

[00:02:53] Or let's just say like I import pet from afrontendmaster/pet. This is an API that you don't know, I know it cuz I wrote it, right, but you don't. But I can just say pet dot, okay, well cool. So let's get animals and what kind of params can I have?

[00:03:15] So I can put, well I can give it gender or organization or size, but let's go with like,
>> Brian Holt: Let's search by type.
>> Brian Holt: Okay, and we'll put cat there, right? Okay, so now I'm searching by cat and then if I hit dot that's like okay, well this is a promise, okay?

[00:03:40] That's neat and then data. I don't know what data is, but we're gonna take a lot at it, right? And then I'll say data., animals, animals or pagination, and then animals., okay, this looks like this is an array, right? So forEach and then animal. Animal., okay, so this can have age and colors and description and this is like interactive documentation on the fly, right?

[00:04:20] This is so cool that I don't even have to look at the docs anymore, and, Joke's on you, I didn't write any documentation, so there is no docs to look at, right? So this is all you get.
>> Brian Holt: But I get all this just at my fingertips, right?

[00:04:32] And if I try and say animal., I don't know, what's something that you might think, legs, right? That's not really a thing, it's gonna say, hey, that's not a thing. You can't do that or this is another way this could be helpful. There is another API called animal.

[00:04:54] If I say animal and then say dot then it's gonna be upset at me because. It's like, hey, this thing requires an ID, if you don't give it an ID then this doesn't work, right? So there's just a bunch of stuff like this that it's gonna do for you behind the scenes, stuff that you would have never thought about before.

[00:05:16] And it just works beautifully with visual studio code because, let me just tell you, I sit with the visuals to do your code team, and the TypeScript team is across, the hall, right? So, they're just constantly yelling each other back and forth across the hall. So, a lot of your favorite features in visuals to do your code are coming from the TypeScript team actually.