Creating an "All or Nothing" Type Helper for React props
We want to make our props behave in an "all or nothing" manner. To do this, we'll create a new type helper called AllOrNothing that will take in a parameter T and returns that T for the time being:
type AllOrNothing<T> = T;
Testing AllOrNothing by Replicating Input
Transcript
00:00 Okay, let's give this a go. So let's first define our type helper. We're going to call this type all or nothing, right, and it's going to take in a T. Now this T is going to need to be kind of like the shape of an object but as we'll see it doesn't actually we don't need to worry about that too
00:17 much. So let's just try by actually just sort of replicating this and passing it in there as an example. So let's say type result equals all or nothing and we're actually not going to pass like the entirety of this, right, because this would sort of defeat the purpose. We're actually just
00:34 going to pass in the type of props that we want to turn into an all or nothing. So now we have results and of course this is just an empty object here, right, which is the thing that we're returning. If we return T here then we're going to get this showing here. Good. So we want to
00:51 preserve T in our union here, right, but we also want to add another thing here. So like something else inside here which is going to be represented by this. So the question is then how do we turn
01:05 this into this? Well one thing you can do is you can use a record type and that record is basically going to take T as its input and then turn it into like a... in fact you know what what we could do
01:20 is actually turn this into another type helper which is we could go to undefined object here and so this to undefined object what it's going to do is it's going to take in a T and then it's going to do the transform in there and so we're inside here we're going to have T or to undefined object
01:41 T there. So does that make sense? We've got two branches here. This one is the first one and then this one is the second one and now we need to figure out what the right transform here is to transform this T into this sort of shape. So my solution for this is to use a record type
01:59 and this record type is going to basically it takes in two parameters. It takes in the key of the object you want to create and then all of its values. So we can say record key of T
02:12 is undefined. Now let's take a look at that. So we can say type to undefined object and let's just pass in this value and on change here. Let's stick that there and we'll go type example equals to
02:27 undefined object. Now what we get here is value undefined and on change undefined. Very nice. So this is starting to look like this one down there but can you see the difference? We've got this one here which has the question marks in it, the optional properties, but the optional
02:47 properties are not being preserved here. So now this record, which is a record of the keys of T and passing in undefined in the values, we need to somehow make all of those values optional. The best way to do that is by wrapping this with a partial. Now partial takes in
03:07 something, takes in T and makes all of its properties optional. So now example here is value undefined and on change optional property undefined. Beautiful. Super duper nice. So this
03:21 means now that our all or nothing type helper actually works beautifully because this result is now value string on change change event handler and we've got this partial record value on change undefined. So it sort of slightly mangles this type output here but we know that if you actually
03:40 look at the implementation of our all or nothing T we've got T or T to undefined object here. Lovely. Now the last thing to do is just replace this with our all or nothing type helper. So I'm going to wrap this in all or nothing. Now I can remove this branch here and I can save it and
04:00 prettier actually just removes the parentheses because you don't need them anymore. And now we've got all or nothing value string on change change event handler and down here it still works as before. So hello still working still doing exactly what we wanted to. So this is really nice because
04:16 actually there's not a huge amount of complexity here. We've just captured our all or nothing type in a one line type helper and two undefined objects still a one line type helper. Super nice.
