Table of Contents
Introduction
Introduction
Ben Hong introduces the course by providing some personal and professional background. The format of the workshop is also discussed in this segment.
TypeScript
Ben 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 Setup
Ben 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 Types
Ben discusses which APIs will be used during this course, TheNavBar component, and demonstrates declaring more descriptive prop types.
Adding Prop Types Practice
Students 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 Components
Ben 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 & Methods
Ben 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 Practice
Students 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 Methods
Ben 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 Practice
Students 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.
Composition API
Using the Script Setup Block
Ben 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 Exercise
Ben 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 Solution
Ben walks through the solution to the Custom Types exercise. The final code can be found on the 05-finish branch.
Types and Constants Q&A
Ben 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 Practice
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.
Compiler Macros: defineProps
Ben 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: defineEmits
Ben 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 Practice
Students 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 Handlers
Ben live codes event handler functions for creating new restaurants, adding restaurants, and canceling a restaurant.
Autofocus Form Elements
Ben demonstrates how to consistently add autofocus to forms by defining a reference to the HTML input element.
Autofocus Practice
Students 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 Handlers
Ben demonstrates creating more advanced event handlers by breaking the v-model into two parts, the value and input event.
Custom Event Practice
Students 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.
State Management
Global State Management with Pinia
Ben 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 Practice
Students 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.
Deployment
Deploying to Netlify
Ben demonstrates how to deploy a TypeScript and Vue application with Netlify.
Creating an Edit Page Exercise
Students 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 Solution
Ben walks through the solution to the creating an edit page exercise which can be located on the 11-finish branch.
