Many of us have been caught by bugs just as insidious where it's, such and such is not a property on undefined, right? It could be a type, and this is gonna be our AdjustmentinputProps. Or I called it, All right, that should work now. And so if you pulled it from an API, TypeScript might not be able to know that. All right, and then we can go ahead, we put more of those in there. Wouldn't it be nice to simply define, okay, here's the props that I'm expecting that are kind of similar to both of them. Frontend Masters is proudly made in Minneapolis, MN. And so okay, we're gonna have an interface here.
Transcript from the "Reusable Props Interface" Lesson. [00:03:21] I understand what you think is a type system, but this is a situation where I know better, and just trust me. It'd be great and then the sliders floor I'll just create the red, green and blue for each. Luckily, they're both HTML input elements. So now, I can just make changes to this one kinda higher order-ish component, and, it's not hard coded as you can only have stuff to put in anything that confirms. And then the color input is just a regular type number, right? Well, as we just need to figure out what React gives us in this case as well. [00:03:44] It's not gonna blow up, they'll just be undefined, which could be problematic in your code base. So then, the props for rendering, the three will be an interface, color adjustment props, just like we've seen before. But really, we know that this is effectively set on the next line, right? So we know that the only prop that this takes is adjustment. [00:00:00]>> We still have to, TypeScript's gonna be angry with us.
And so it's saying, please just make sure it's there before you use it. And we're gonna say but just pretend that it's an RGB context type, right?
Color sliders also doesn't need anything any more, either I'll comment out the inputs for now, we'll get to those in a second.
So one might think, no, I had to specifically type everything, there's no way that I can be dynamic with what component I pass in and have it conditionally rendered, right? [00:04:46] So we know in case it's happening. Trust me, even though you just got this JSON response back from the server. If you didn't need dispatch, you could say you can even define a green, red, green and blue value here, and only put in dispatch lane. So we could say that listen, we can do it, we didn't sell this the same way we solved with some of that state, you state stuff before. [00:06:01] So one of the things the problem we have to solve for, and again the very beginning of this course, right? And what we're gonna say is listen, you can pass me in any component that you want as long as it adheres to this interface. But other than that they're mostly the same other, than some formatting and stuff that. But not everywhere, because now it doesn't know if these properties exist on this object, right? [00:10:08] I'm just kinda introducing the topic now of what we call utility types. [00:06:20] Cuz like most things, the easy things are easy, and the weird cases are when you try to do some things that are a little bit trickier, all right? Yep, wait for it, Import color adjustment, Color adjustment, the values are in red, that's fine. So it's times where you have enough confidence. [00:02:32] My argument to you is just going to be don't, right? And because the default value is now an empty object, calling those properties is not problematic. [00:05:03] But the other way is to kind of create an abstraction that will, in the same way we had to check to see if value was null or not. [00:01:18] And so you could do something where we comment, let's copy this, and we'll comment it out for a second and we'll just say, Just name it something, right? And I'm using capital A cuz I'm gonna talk about a React component. From react and then adjust it, let's go with adjustment. [00:12:25] Right, so this works, we just need to use it, so we can kind of swap it out. Yeah, just say that your strings are gonna be strings, everything's great. [00:07:07] I'll show them to you real quick. And one of the things that we can notice is that previously, the sliders we took over the individual side was actually still to this moment. [00:13:25] I'm sorry, ColorAdjustment. It's, this can be value, or it can be null. [00:10:44] Previously, we've seen string, number, boolean.
[00:07:30] Take ID label and value, we're gonna need an on change in there as well, the inputs right now don't do anything. [00:05:38] Generally speaking, I think that this will do the trick most of the time but understand you're taking on a certain amount of risk. All right, so let's, let's take a look at the next one that I wanted to show you which is that's the wrong one. The alignment when only ever good or bad, but TypeScript is assumed that it was a string. Because to be clear, TypeScript's not wrong. So yeah, that is some of the problems that come with the fact that a lot of the safety and benefits here are really good.