Loading
Current section: 3. Literal Types 4 exercises
solution

Preserve Literals

Transcript

00:00 Alright. Let's get into this. We've got this roles object, admin, editor, viewer, can be delete or can ban, can delete, can ban all on all of these. Alright? This makes sense.

00:10 If I hover over this, you're gonna see roles admin can delete users' Boolean, can ban users' Boolean, etcetera on each one of these. Now that's interesting because we actually, know that admins will always be able to delete users. It's it's never going to change. This is the way that our roles are going to be for the entire lifetime of the program. Now, of course, I could change the code, but, that will change the program.

00:33 So, if we can assume safely that, these values will never change, well then, maybe it would be nice if the type explicitly said can delete users true as a literal type. So here before I do that though, let's make a role that is gonna give me all of the different roles that we have available. This is using the key of type of words. So this or type of, roles. Key of is a specific, TypeScript feature or TypeScript keyword.

01:04 You're not gonna find this in JavaScript. Type of works both in JavaScript and in TypeScript. And in this case, type of is going to give us, the the, type of can be seen as a mechanism, not only in JavaScript for, like, determining the type of something, but it also can take a a value that's in or a variable that's in the JavaScript world and pull it into the TypeScript world. So now we can turn that thing into types. And then the key of is going to, take the type here.

01:36 So effectively, type of is turning roles into this, what we're looking at here. Key of is going to take that object and take each one of these keys and turn that into a union type. And so now if we look at role, it's gonna be admin, editor, or viewer. So we use this quite a lot and it's quite nice, to be able to take a value that's a run time value like roles and bring it into the type world so that we can, get things typed nicely. Okay.

02:02 So, I'm gonna get rid of this comment and we're gonna see an error here. And so what this is saying is admin can delete, and we're explicitly saying that this has to be true. The admin can delete it. Absolutely, 100%, it's true. But the problem is, as I described earlier, this admin, the type for the admin just says has a boolean.

02:23 We don't actually know because it could be modified. It could be, changed in some way. And even though we have it hard coded up there like that, TypeScript is just doing the best it can. It doesn't really know, that it's not gonna be modified. So the best it knows is that it's a boolean.

02:38 By adding as const to this, now we are saying, no. No. No. This type isn't just Boolean. It is read only.

02:47 Like, these things will not change. Roles will only ever have an admin, an editor, and a a viewer. Those things will not change. And the admin will only ever have, delete users as true and ban users as true, etcetera, etcetera, etcetera. You could actually also ask const these individually.

03:08 So if you just wanted to ask const the admin, now we're getting read only true on these, but the rest of these aren't read only true. But in our case, it makes much much more sense to as const, const, on the roles object itself. Okay. So let's make a can delete users that's gonna take a role and decide whether or not, those users can be deleted. So that's why we needed this, role union right here.

03:34 So that's cool. We could have also just said, admin or editor or viewer, but by deriving it from the object itself, we don't, have to worry about that which is pretty nice. If we didn't have the as const, this actually this piece would actually still work. So the as const is mostly useful for, knowing whether or not or or having, like, the the structure of that object be the structure of our type as well. Okay.

04:05 So we export this, and everything is looking good. We can, console log. Yeah. I can delete users admin editor and viewer. We get true, false, false.

04:15 K. Very good. Okay. I think that's everything that I wanted to show you with this one. So as const, I use it relatively regularly.

04:25 It can be pretty useful also with discriminated unions. I'll I'll show you actually really quick. I'll show you one other example. In React router, there is a function called, an action function. And what this does is it returns a, a response or a a JSON object, based on whatever action you're trying to accomplish.

04:46 So somebody's making a request to your server, you do something and then you return a response. And often, that response is either gonna be success. I did it. Hooray. Or it's gonna be error and here's the problem.

04:55 So often, I will use as const for something like that where I'll say, if, did thing then return, status success. And then, otherwise, I'll return status error and did not do thing. Okay? And so here we get our result is the action, and the result here is saying, that it's a status that has a string or an error that's undefined or it's a status that's a string with an error, that is a string. And there's not really a great way for me to know whether it was an error or not.

05:30 And so this is another case where I will add as const to both of these And now the, result is going to be it's either status success and the error is definitely undefined or the status is error and it, did nothing. And so now I can say result status equals error. Now I know, I can console log the result error I know for sure. Whereas if it's a success, I know that the error is gonna be undefined. And in fact, sometimes I will even say error is null to be very explicit.

06:05 Like, no. No. This this error should not exist in this case. So as const can be used for that as well. Okay.

06:13 Great. Hopefully, that was fun and interesting for you, and, let's continue on to learn more about this.