Types and Constants Q&A

[00:00:00]
>> Just curious whether this kind of process in larger Vue code bases kind of results in the constants TypeScript file getting kind of cannibalized or incorporated into the types file. Do you see frequently constant files or?
>> Yeah, okay, so this is a great question, because let's take a look at this.

[00:00:20]
And this segues perfectly into the next thing I wanted to talk about. So here we've noticed that we have our constants types here, and we also have our types here. And as developers, we have been inundated with the do not repeat yourself rule which to me, it's often done overkill.

[00:00:35]
But obviously, we can see here there's some duplication, we have two sources of truth. This is a bit of a problem. So the thing about the constants being subsumed into types, though, is that the constants are still valid JavaScript values that you could assign later on. So for example, one of the things we're about to do is, if we take a look at our application and if we go to new restaurant, you'll notice we're actually not rendering out the status right now.

[00:00:57]
There's no way for users to pick which status it is. And so when you do that, which we'll do in a little bit, we'll want to import this const, right, as an array that will loop through and then render out our options. But remember that the value here is not the same as a type cuz this type can never be consumed in a way that traditional JavaScript would.

[00:01:18]
And so let's go ahead and see how we would solve that problem cuz this is a common one. So let me start by, again, let's start by showing the problem, and then we'll go from here. So what we're gonna try to do right now is inside of the new restaurant page, we're gonna go ahead and flush this part out.

[00:01:33]
So I'm gonna go ahead and go into newRestaurant and we can see here that this hasn't been moved over to TypeScript yet. So I'm gonna go ahead and do that, let's say setup lang="ts". And then after that we're gonna, whoa, you know what? I'm not gonna do that just yet cuz I wanna prove something real quick.

[00:01:51]
Okay, I'll just do to lang="ts". And then I'll import defineComponent from Vue. And so actually just to explain what I'm thinking here. The reason we're not gonna do the script setup just yet is because I haven't taught you all how to define emits and props and that kinda stuff.

[00:02:08]
So rather than skip directly to that, we're just gonna do something we're familiar with, which is the defineComponent, okay. So here inside of, let's see, [SOUND] where's our status? Status is right here. You'll notice that it's looking for this restaurantStatusList. It doesn't exist right now, and the reason for that is we haven't imported it yet.

[00:02:31]
So if I import restaurantStatusList from my constants, I can actually ingest it here inside of my reactive data. And then once I do that, you'll see that everything shows up, okay? But we still have a small problem here and the reason for that is because we have this duplication of data.

[00:02:56]
And so the question is, is there a way for TypeScript to look at a constant we defined here and then generate the types from it? And so how this works, I honestly don't know why they designed it this way, but it's fine, I'll show you how it works.

[00:03:13]
All right, the first thing you're gonna do when you want, okay, think of it this way. Would you kind of want, and if we were to do this ourselves, is would you kinda wanna be like loop through restaurantStatusList constant, and then unite them with a union operator, right?

[00:03:33]
Like we were programmatically dramatic, kind of what we were thinking. So you might be thinking, there's a for loop or something, not quite. The way this works is first, let's go ahead and import our constant, all right? So we'll import restaurant, looks like restaurant, okay, doesn't like the imports, so I'll just have to manually do it, constants.

[00:03:58]
Okay, so if I do restaurant, why does it not like it, status, it does not like it. Import type unresolved. Sure, okay, yeah, that's okay. Sorry, this error is correct. This is not gonna work, right, because this is a JavaScript value, this is not a type, right? We have a keyword for that, for a reason.

[00:04:24]
So one one the things you can do or what you're supposed to do or the most popular convention is you typecast it as a constant, and this is my number one complaint, cuz it is already a constant. It's weird to me that you would cast something as a constant, but you'll notice it does something, though, to the restaurantStatusList, is that it makes it available to TypeScript as this read only tuple.

[00:04:44]
And so for those that aren't familiar with that programming term, it's basically where you have an array with fixed values in certain positions. Although, I'm not saying it is a tuple but it just kind of like that, where it's saying these are arrays with these specific values in these specific places.

[00:04:59]
And then I don't care for the syntax, I'm just making this for the record. You ask for the type of the restaurantStatusList and then not only that, you have to then use this square bracket number, because it is technically an array of things you're reading. But arrays are accessed via a number, this number here is not arbitrary.

[00:05:24]
It is the type of value that's being used to access the values inside of this read only thing. But once you do this, though, you will notice that type status is actually generating as you would expect, right? It has a want to try, and so now we come in here and we're like, hey, we wanna add delicious and we save it, cool, status is automatically updated.