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

Steve discusses using propTypes in TypeScript to set the intentions of a prop. Setting a propType will let TypeScript know what type to expect when a prop is in use. If the propType does not match TypeScript will throw an error.

Get Unlimited Access Now

Transcript from the "propTypes" Lesson

[00:00:00]
>> Here we've got a component. And this is arguably too simple of a component. The fun game like, is this TypeScript or is this JavaScript? The answer is, yes. But also this is a component that could very clearly just be HTML. But the kind of interesting part that we kind of see here is that, we go TypeScript, this is a TypeScript file.

[00:00:21] It has a TSX extension, TypeScriptX, right, just like JSX for our react components. And as we hover over things, we can see that we're getting some autocomplete help here, right? And so TypeScript has looked at this component, which again, if I didn't show you the file name or anything along those lines, you just assumed it was JavaScript.

[00:00:40] Go ahead and figured out, this is a function that takes no arguments and returns a JSX element, right? With basically no extra ceremony that we have to work or worry about at all. And you can kinda see as we go through it has figured that all out just through static analysis.

[00:00:59] And we have had other ways to kind of make sure that our react components get the properties that we think that they should get, right? A popular ish library has been prop types, right? Prop types were basically the way in development you can define what properties a component takes.

[00:01:19] And in the event that you give it the wrong one just either from a mistake or just an error somewhere along the way. It would give you a warning in your console as you ran the application to see like, hey, this was expecting an object, you pass it a string that's not gonna work now.

[00:01:36] This is at runtime involved you actually checking all that stuff in the console, so on and so forth, right? TypeScript and it's very, very highest level, seeks to give you an easier kind of way to do. And it's actually less writing and less code than having to do it with the library that used to be included in react and then got pulled out into its own library.

[00:01:58] So what would that look like if we didn't have TypeScript? We would From prop types. And then we might say, let's say, hypothetically, when I wanted to put a name where it says name here. That seems like a good thing to do. We can go ahead and we would say something along the lines of name.

[00:02:26] And then we'll go toss it right in here. And you can see TypeScript getting a little angry at me right now. We're not gonna deal with that just yet. We're gonna read there and we're gonna figure that out in a second. But you prop in that name and then we would say something along the lines of like name tag.

[00:02:51] Right, and this is how we might have done it in JavaScript. Now, let's look at what that would look like if we factored into TypeScript using a react component. So you can see we got name. Now, the interesting part is TypeScript's yelling at us saying, hey, this name has a type of any.

[00:03:09] And any is TypeScript, almost basically falling back into what JavaScript would do. And such as saying, like, I don't know what this is. So I'm basically just gonna be hands off. It could be a number, it could be a boolean, it could be a string. I don't really know, I cannot help you here in any way, shape or form.

[00:03:26] And there's a bunch of ways to do this. There's a setting in TypeScript called no implicit any, which means your code won't compile if you do this. Because a lot of times, if you're gonna opt into the TypeScript lifestyle, like roughly what you want is. [LAUGH] You're gonna fall back to any all the time, you might as well just be writing JavaScript.

[00:03:42] So let's see what this would look like in TypeScript instead, we're gonna see is actually a little bit simpler. So, instead of having this over here, let's actually just move it up Here and we're gonna call it name tag props, all right? And that's simply going to be, give it the type keyword.

[00:04:08] We're gonna say the name is a type of string. And here we'll say this is name tag props. Now, we have a new error down below or red squiggly line is TypeScript being salty with us. And we'll need to address that in a second. But you can see roughly a lot of the syntax is the same.

[00:04:28] We have this type keyword, like I said, if you think about like cost or lead or something along those lines. When this gets compiled to JavaScript that's gonna get ripped out. So this is not going to bloat our code or anything along those lines. And you can see that we've got this name tag props.

[00:04:43] And again, like, really, the argument that's passed to a react component is props. And so we could say, props dot name, either one, whichever makes you happier is fine. Now, interesting part is that, TypeScript has found that despite what we told it about this component, if we hover over you can kind of see a little bit more about it, right?

[00:05:02] It's got these props which are named tag props, it's gonna return a JSX element. We hover over here, we can say a name tag props though. Assuming that there's one prop that has a name, and it should be a string, neat. Okay, what's this red squiggly line that so upset with me?

[00:05:16] It's saying, hey, you told me this is supposed to have a name? And you're using this without a name, that's not good, right? And to be clear, if you wanted to have like a nickname be an optional prop, we'll talk about that a little bit. There's all sorts of things you can do.

[00:05:33] But right now, you said the intention of this code is that it gets a name, prop. That name prop is a string, and I wanna use it and then you use the component without that. So, let's go make it happy. And now my code is happy, everything works.

[00:05:49] So, just quick little tasty notes here is you could theoretically do this in line, right? We could say something along the lines of Name is string and everything works as well. This is fine, we'll use it occasionally during this workshop, this course when it behooves us. But generally speaking, you can imagine that with one prop, that's a string, no big deal.

[00:06:13] All of a sudden you have one of those more complicated components that has ten different props doing it in line, is going to get a little bit messy. If you move it into a type up here as well, you can do stuff like export, and you can then import into other files.

[00:06:29] So, doing it in a type declaration makes a lot more sense. But you don't have to, if you don't want to. You're the boss of your life. And so we have this here as well, let's switch that back just to make sense, Name tag props, everything compiles as it should, sweep.

[00:06:50] We can see, I have a little component, it renders a name tag. We're good to go in that sense.