Current section: TypeScript 59 exercises
solution

Props

Loading solution

Transcript

00:00 Okay, so here's what we're going to do. I'm going to change this to a string of two, and we're going to work until this is giving us an error. In fact, let's do a string of one here also, and then I'm going to make this a, I don't know, a boolean false. Here we go. And so now it should blow up,

00:19 but we're not getting any warnings right here, and our job is to make it so that we get warnings from that. So we're going to make a type called calculator props. This is going to accept a left, an operator, and a right. The left is a number. The operator right now is a string. We're going to improve this in a bit. And the right is a number. And then we set that to be, actually,

00:39 I'll leave that there. You'll see here in a second. It's kind of cool. We'll set this to be calculator props. And now we're getting a red squiggly here because we were expecting an error, but we're not getting one. So that's a good thing. And then if we come down here, boom, we're getting errors. Sweet. So we don't even have to run the application to know that there's

00:57 a problem. So let's get rid of this. That error goes away. And let's change this back to a number. And let's change this back to, what was it, multiply? Yeah. And our calculator is working.

01:08 Hurrah, hurrah, hurray, yay. So here we have our type calculator props. We have that being set as the type for this object, which we are immediately destructuring. Of course, we can do props and destruct those here if we wanted to. That also works just fine. And again, the syntax allows

01:28 us to inline this stuff too if we want to. That works as well. And if we're going to do things the way I typically do them, then we're going to destructure inline as well. So this is the way that most of my components end up looking. Sometimes I'm going to extract it to a separate type,

01:45 but most of the time I don't bother. I just inline it all. And I think it works nicely there. All right. There you go. That's the first step of making the experience much nicer for when you are rendering this calculator.