React and TypeScript propTypes
This course has been updated! We now recommend you take the React and TypeScript, v2 course.
Transcript from the "propTypes" Lesson
[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: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: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.