Loading
Current section: 3. Literal Types 4 exercises
solution

Single Source Of Truth

Transcript

00:00 Alright. I hope you had a good time with this one. Let's do, let's create our route name. So this is gonna be, take the routes, get the type of that. So that gives us basically this.

00:10 And then we're gonna key of that. So that'll give us home login and settings. That's what the key of is doing. Home login settings. Perfect.

00:17 Now we're going to create a route path from those routes. So I wanna get these values as a union. The way that we do that is we take, the route name or or we take the routes. We get a type of that. So we're gonna get this again.

00:30 And then we're going to, take the route name, or or select the route name off of that type. So that should give us a union of each one of the values, from the routes type of each one of these, values of the each of these keys. And what that gives us instead is just a string. Because if we look at the type here, that's, an object that oops. It's an object that has each one of these set as strings.

00:56 And that's the best that TypeScript Script can do because it doesn't know that we're never gonna change those. So all it knows is that, hey, these are gonna be strings. You might change it and it's fine because I could absolutely go in here and say routes dot, home. Yeah. Home equals slash home.

01:12 And so TypeScript is actually doing the right thing here. But if I added as const to here now, TypeScript is like, woah. Woah. Woah. You can't change that.

01:21 You said it was a read only property by adding the as const. And actually, here, let's let me show you that first. So by adding as const, home is now known. It's only ever gonna be a slash, whereas login and settings are still possibly strings. So that's why I'm gonna put the as const on the entire object.

01:39 So now the whole thing is read only. You cannot modify. You cannot add, any properties to this. This is a constant, immutable object. And that gives us a lot of benefits.

01:51 One of those being now our route path is a slash or a slash login or a slash settings, which makes it really nice. So our default route, being of type home, that, that gets us working. Before, we had the as const, then we get an error here because home could be a string. It wasn't necessarily just a a literal slash. So that made it, yeah, that makes it work.

02:17 So let's make a, get route path and see how this could be so useful. Let's get rid of that as const, here and see what happens when I do, get route path here. So here our name, is a route name. That that one's easy because the the property names are, gonna be constant here. So that works out just fine.

02:35 But the route path, is just a string. So it can't be as useful, for us. By adding as const, now the route path that's returned is gonna be either log slash or login or settings. And in fact, we don't need that return type. It still knows.

02:50 It's gonna be slash login or settings because, routes is constant. If I get rid of that, then all we know is that it's a string. So as cost can really help out in some of those, settings and situations, and I hope that was interesting for you. Let's move on to the next one.