TypeScript and Vue 3

Single Source of Truth Practice

Ben Hong

Ben Hong

Netlify
TypeScript and Vue 3

Check out a free preview of the full TypeScript and Vue 3 course

The "Single Source of Truth Practice" Lesson is part of the full, TypeScript and Vue 3 course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to create a single source of truth for the restautantStatusList on the 06-exercise branch. The solution to the exercise on the 06-finish branch is also provided in this segment.

Preview
Close

Transcript from the "Single Source of Truth Practice" Lesson

[00:00:00]
>> For this exercise as we've just shown, we've gone ahead and set up a restaurantStatusList as the single source of truth. So we can see here with the type, right, we have the input type, StatusList. And here we're using that funky little syntax where we have typeof restaurantStatusList and the number.

[00:00:16]
And so for this particular exercise, what I want you to do is basically mirror what we did with dietList, where we can maintain that as a single source of truth rather than having that duplicated across types and constants. All right, hopefully, that was pretty straightforward minus the awkward syntax.

[00:00:37]
But let's go ahead and do that together, shall we? So let me check out the branch for 06-finish. So the first thing we're going to do is we're gonna go ahead and make sure that this is typecast as a const. Because otherwise, basically, TypeScript cannot read those values.

[00:00:52]
And so what I didn't get to capture on the last, right before we did one of the exercises is that, VS Code was actually yelling at me because when I imported restaurantList, I did not tell it was a type. So, some of you might have seen that. So once you add that type here, that should resolve the issues at hand.

[00:01:10]
But this is one of the reasons why we actually need to do this as a const bit, because otherwise without it, it's just an array of strings. So this is what allows us to read it the way it is, but anyhow, okay. So we have that, and then we have our dietList.

[00:01:27]
And then once we say that, and we'll come in here. And once again, it's type of dietList, and then it's accessing the array how, via numbers because an array is indexed via numbers. So that's how you can try to remember it. But yes, hopefully the TypeScript API comes out with an easier way for us to do this going forward.

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