Advanced Redux with Redux Toolkit

Utility Type for Incomplete Data

Steve Kinney

Steve Kinney

Temporal
Advanced Redux with Redux Toolkit

Check out a free preview of the full Advanced Redux with Redux Toolkit course

The "Utility Type for Incomplete Data" Lesson is part of the full, Advanced Redux with Redux Toolkit course featured in this preview video. Here's what you'd learn in this lesson:

Steve uses Utility Types to demonstrate an alternative method for handling incomplete data. A RequireOnly type is created with TypeScript generics. The resulting type allows required properties to be specified and any remaining types to be optional

Preview
Close

Transcript from the "Utility Type for Incomplete Data" Lesson

[00:00:00]
>> So, let's talk about this is one that is currently not in the TypeScript standard library of utility types, but I will show it to you because it's one that I frequently make for these cases that has served me well. And if someone's got like, I have a better way to do this, yo hit the chat app, I'm in.

[00:00:20]
But I'll show it to you, I mean, cuz it's a utility type I'm going to define it globally. So, I'll go like global.d.ts. I'll put it up top just to make it easier for when I push off some of this code in a little bit. And what I will do is I'll have this type.

[00:00:35]
And I call it RequireOnly which is kinda like partial and pick mixed together. Which is like anything on this type can be optional, but I have a few opinions on things that I absolutely want, the TypeScript compiler to enforce in my UI, that I am providing, right? And it feels dangerous to say, will eliminate the need for a whole bunch of random unit tests of you handing in all sorts of garbage.

[00:01:02]
You know those tests that are just like, okay, what if I get this thing? What if I get that thing, right? Having some of that confidence out of the box is usually super powerful. So, really we care about two things we want, what is the type that we're basing this off of?

[00:01:16]
And what are the properties that you want to keep? So, I'm gonna say that again, cuz I'm gonna use those letters in a second. What's the type that I'm basing this off of and the pop up properties? So, we'll say T is the type and P is gonna be what the property I want is.

[00:01:31]
But we do say that, yo, don't give me garbage. It needs to be one of the keys of that first one, right? So, it's got to be a key on that one and that will kinda constrain it. So that's actually helpful for me, where I will say, could I write this by hand on the other file?

[00:01:50]
I absolutely could, I just don't want to. Use pick, so that's the same as if I was writing. That you saw earlier in the other file. And you also saw me write. It's basically combining these two so I never have to think about it again. And partial, but I need to do one other thing here, which is, you'll see why in a second.

[00:02:19]
I'm gonna do it first then I'll fix it. This would create a kind of a weird type for me, and so far, it doesn't really know what to do with the one that I wanna keep. So I wanna do, definitely want the one I want, the way that it was, and then everything else, right?

[00:02:37]
So then we will also omit the one that we're looking for. And like I said, you could write this by hand too. If you just wanted to write the type by hand, absolutely go for it but if this pattern is helpful for you too, awesome. And so, now I can say, all this type, everything else is optional, but these three or four, which has stopped me from a lot of head scratching when I'm making these partial types and getting ready to put stuff that I only have some of the data as I get ready in that reducer.

[00:03:11]
Otherwise you find yourself writing conditionals, you find yourself then make sure you have the test to those conditionals. And yeah, right test but also if you can get helped by your type system, you should absolutely do that. So now, I can just say for the rest of my code base, This gives me basically the same type you can kind of say that's super helpful to look at, but it is.

[00:03:32]
Everything is optional but title, so make sure we have that. Everything else, do what you want. This gives me the flexibility later on my code base that if I am doing stuff from a user page, right? Cuz a lot of time stuff happens in a brand new section but then it's another user, then we should have it scoped.

[00:03:47]
Or if they're already doing it from a project, we might already have that information, right? And you find yourself having these more cases where it's total partials or only wanting a type starts to bite you. So, super helpful for me, I hope it's helpful for you. Ask
>> Does it work well with multiple fields you want to include?

[00:04:06]
>> This one is set for one, I think I could theoretically do more of them. Actually, no, because you should be able to use a union, right?
>> I wonder how Moot will react to our conflict resolution in that case.
>> You wanna find out together? All right, let's do it.

[00:04:35]
And we'll say that this one will take, you can almost put it back to the way it was, so, just title and ID. Right? So, it's not happy with me. I gotta use union. It's happy with me again. And so, in this case, we'll say,
>> Sorry, what was the question?

[00:05:02]
>> The question was could I put more than one, like I did with title? Pretty sure that I can, but what I don't wanna do is, say absolutely, and then find out that I'm a liar to you. So I was like, we might as well find out I'm a liar together.

[00:05:16]
And so, pull this in and we'll say that We gotta say it set tight. Yeah, works, yeah. I was like, does that why I use it that much and it doesn't do that?
>> Yeah, I didn't expect to use the or in generics portion.
>> Yeah, you could put a union in there.

[00:05:55]
>> Could you flip back to the RequireOnly, it was.
>> Absolutely.
>> One particular part of it. So you're picking TP in the case where the property on T is optional is the intention to mark it as required or
>> It would say the way it was.
>> Yeah.

[00:06:15]
>> Yeah, I want anything as it was. Normally, I am only picking the ones that would've been required. There is a required utility helper for some reason needed to do that, I could get
>> And that's how I wrote it when we were talking through it I was like, okay, so we're gonna make these required and I use that utility, and then I compared it to yours, I was like, I wonder.

[00:06:40]
We're thinking about things slightly differently.
>> Yeah, this works as I intended. I think this probably works as you intended, yeah.
>> Yeah, yeah.
>> Yeah, cool, awesome. Sweat, how will the final exam? All right, so now we've got that in place. We can create them what we don't have right now is any way to show these and again, if you really wanted to you could just literally, this was a helpful way this made you sad.

[00:07:09]
You can literally just write out the type there's only four properties on this type, you can just make a new type where there have question marks yes it is repeating yourself, right? Yes, you're supposed to keep things dry but also it's pretty explicit right, and sometimes clarity explicitly is like better in a lot of cases

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now