Table of Contents
IntroductionBen Hong introduces the course by providing some personal and professional background. The format of the workshop is also discussed in this segment.
TypeScriptBen discusses who this workshop is for, including people who are just curious about TypeScript with Vue and people who are ready to learn the fundamentals of TypeScript and Vue integration.
Repo & Vue CLI SetupBen walks through the prerequisites for the course repository, discusses changes to the Vue CLI, and suggests newer front-end tooling. A demonstration of setting up the course repository and a walk through of the application are also provided in this segment.
TS Fundamentals & Options API
Declaring Prop TypesBen discusses which APIs will be used during this course, TheNavBar component, and demonstrates declaring more descriptive prop types.
Adding Prop Types PracticeStudents are instructed to convert a component to TypeScript, import the defineComponents method, and define the TypeScript types in the 01-exercise branch. The solution to the exercise is also provided in this segment and on the 01-finish branch.
Using Types in Multiple ComponentsBen briefly discusses the layout of the exercises in the course repo, how to define the shape of an array of data, and demonstrates how to utilize types in multiple components.
Computed Properties & MethodsBen demonstrates using computed properties to create a data cache that updates automatically based on other data. Students' questions regarding what information is provided in TypeScript errors and if types need to be added inside the filter function are also covered in this segment.
Converting to TypeScript PracticeStudents are instructed to take the DishesPage and convert it to TypeScript, type the data, and computed properties in the 02-exercise branch. The solution to the exercise is also provided in this segment and on the 02-finish branch.
Migrating to Composition API
Refactoring Options API MethodsBen demonstrates migrating Options API to Composition API. The Composition API is a set of APIs that allows the ability to author Vue components using imported functions instead of declaring options.
Migrating to Composition API PracticeStudents are instructed to migrate the options into the Composition API on the 03-exercise branch. The solution to the exercise is also provided in this segment and on the 03-finish branch.
Using the Script Setup BlockBen demonstrates using script setup, introduced in Vue 3.2 and above, to help trim down the more lengthy boilerplate. A script setup practice exercise on the 04-exercise branch and solution on the 04-finish branch are also provided in this segment.
Custom Types ExerciseBen discusses defining custom types and instructs students to create a custom type from the values in dietList. This exercise is on the 05-exercise branch.
Custom Types SolutionBen walks through the solution to the Custom Types exercise. The final code can be found on the 05-finish branch.
Types and Constants Q&ABen answers a student's question regarding what happens to constants, if the constants get incorporated or if they are put in their own file. A demonstration of generating types from defined constants is also covered in this segment.
Single Source of Truth PracticeStudents 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.
Compiler Macros: definePropsBen demonstrates using the helper method defineProps to generate prop types. Vue provides this method for added functionality that does not affect the resulting bundle.
Compiler Macros: defineEmitsBen discusses defining and emitting events using the defineEmits macro. The defineProps and defineEmits compiler macros are only usable inside <script setup>. They do not need to be imported and are compiled away when <script setup> is processed.
Compiler Macros PracticeStudents are instructed to strip down the DishCard and practice defining the props on the 07-exercise branch. The solution to the exercise on the 07-finish branch is also provided in this segment.
Handling Events & User Input
Event HandlersBen live codes event handler functions for creating new restaurants, adding restaurants, and canceling a restaurant.
Autofocus Form ElementsBen demonstrates how to consistently add autofocus to forms by defining a reference to the HTML input element.
Autofocus PracticeStudents are instructed to autofocus a field on the DishForm on the 08-exercise branch. The solution to the auto focus exercise can be found on the 08-finish branch.
Custom Event HandlersBen demonstrates creating more advanced event handlers by breaking the v-model into two parts, the value and input event.
Custom Event PracticeStudents are instructed to hijack the update for the dishes search so that it only updates when the user hits "Enter" on the 09-exercise branch. The solution to the custom event exercise can be found on the 09-finish branch.
Global State Management with PiniaBen demonstrates using the Pinia API for global state management. Pinia removes the need for boilerplate mutations, is type-safe, and React to store changes to extend Pinia with transactions, local storage synchronization, etc.
Creating a Store PracticeStudents are instructed to practice creating a DishStore on the 10-exercise branch. The solution to the creating a store exercise can be located on the 10-finish branch.
Deploying to NetlifyBen demonstrates how to deploy a TypeScript and Vue application with Netlify.
Creating an Edit Page ExerciseStudents are instructed to create an edit page using all of the knowledge gained throughout the course on the 11-exercise branch.
Creating an Edit Page SolutionBen walks through the solution to the creating an edit page exercise which can be located on the 11-finish branch.
Wrapping UpBen wraps up the course by providing recommendations for the next steps and key ideas from the course to keep in mind. Student questions regarding how to know when to migrate to TypeScript, if Options or Composition API is better for larger projects, and if it's possible to export to a test file are also covered in this segment.