Helpful Type Utilities

[00:00:00]
>> Steve Kinney: The other thing that I will kind of show you, again, it is not TypeScript and React specific, so I am going to be respectful of the fact that there is plenty of material on fully TypeScript to go into. There's a library called TSD which will allow you to kind of test out your types. That's not the one I wanted. I wanted this one, where you can do like expect type and you give it something and it will like, the test will fail.

[00:00:29]
So if you're working on these sometimes, you can use this library to make sure that like, if you're trying to work on your own utility type—because it's not like a value you can console log in a lot of cases—this will allow you to go ahead and run it like it's like a Vitest effectively and like, okay, I made, yeah, I'm trying to think like, let's see, for a fun, the input change handler, if I give it something that is legit input change handler, and if it's not assignable, I know that I messed something up, right?

[00:01:09]
I'll be honest with you, a lot of times, do I run these tests all the time? Do I use it sometimes more if I'm just trying to like, did I get this right? A lot of cases that will be the case as well. There are some fun ones that you can just kind of try out if you want. The one that I should put—it's in the solutions, but I should put it probably in this file too—that I use a lot is this ability to make certain keys optional.

[00:01:40]
Right, like, hey, I want the ID to be mandatory, but everything else to be partial. That's not actually one that's built into TypeScript by default. You can make everything optional. You can make everything read only. You can make everything required, but like, hey, I want to make three out of four keys optional. There's not really a great one for that. The solution's in here as well. There's just some that I end up, I've found over the years, I either copy and paste from previous projects, or some I'm just, I can do it with my eyes closed, like this one.

[00:02:16]
But they are like for a lot of these things, if you find yourself doing weird like hard coding in stuff, you are better off dedicating a little bit of your time. That said, I can't promise you you will do it often enough to justify spending a bunch of time on it, but my goal with this is to kind of show you a little bit about how these can be useful things. So I'll give you one example, like in a much more practical format, a place where you might use this a lot, which is I've got that, I've got a plan object, which again is just a to-do from that JSON Placeholder API.

[00:02:59]
And for update plan, what I really want to do is, because it could take a partial, right? It's just like, hey, whatever the current object is, give us like the new completed is now true, and it will only apply those things. So what I really want is, I can't, if I say that it is to-do, right? If we look at to-do, I have to give it the ID, the title, even if the title didn't change, even if completed didn't change, a user ID, but that's not how the API works.

[00:03:49]
If I handed update plan just like, no, right in there, right in here, if I handed this like the ID of 123 or whatever and just completed is true, that works with the API, right? But if I say to-do is expecting all of these things, right, what I really want to do is just have some of them, right? And like, I don't, if I'm passing ID in here, maybe I don't want to allow it to have ID. So I could do something like partial.

[00:04:34]
And now if you look at updated plan, it is a partial, which means all of the things are optional, right? And that will work. But let's say, let's say I don't want to let them put in user ID and have somebody be able to override what user owns that to-do. That seems bad, right? Then I could do something like, you can kind of stack them. And I can say omit ID or ID and user ID. And so now I've created one where no one can accidentally, because TypeScript will catch it, like, no one will accidentally kind of pass in some other property.

[00:05:19]
These two are now omitted, and so the real type ends up being just title and completed, right? And you can use this by taking existing types because the failure mode is like making your code really undry, wet, if you will, and making a second type and then, oh, a new property got added. Well, now you got to add that to three other types, kind of the ability to derive types from others. Types is great.

[00:05:44]
And so the optional one effectively does a version of this, right, which is like, hey, only these properties, so on and so forth, but you can begin for the needs of your app, just kind of stack them all together. And like become, it's one of those things where it's kind of slightly different for your use case, but also incredibly powerful.