Ben Hong
Netlify
TypeScript and Vue 3
3 hours, 6 minutes CC
Course Description
Adopting TypeScript in your Vue projects doesn't have to be all or nothing. Learn the essential skills you need to leverage what makes TypeScript great in your Vue apps. You'll learn to integrate TypeScript with Vue's options API and the Vue 3+ composition API.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 12 minutes
Ben Hong introduces the course by providing some personal and professional background. The format of the workshop is also discussed in this segment.
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.
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
Section Duration: 39 minutes
Ben discusses which APIs will be used during this course, TheNavBar component, and demonstrates declaring more descriptive prop types.
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.
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.
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.
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
Section Duration: 23 minutes
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.
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
Section Duration: 37 minutes
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.
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.
Ben walks through the solution to the Custom Types exercise. The final code can be found on the 05-finish branch.
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.
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.
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.
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.
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
Section Duration: 25 minutes
Ben live codes event handler functions for creating new restaurants, adding restaurants, and canceling a restaurant.
Ben demonstrates how to consistently add autofocus to forms by defining a reference to the HTML input element.
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.
Ben demonstrates creating more advanced event handlers by breaking the v-model into two parts, the value and input event.
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
Section Duration: 19 minutes
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.
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
Section Duration: 23 minutes
Ben demonstrates how to deploy a TypeScript and Vue application with Netlify.
Students are instructed to create an edit page using all of the knowledge gained throughout the course on the 11-exercise branch.
Ben walks through the solution to the creating an edit page exercise which can be located on the 11-finish branch.
Wrapping Up
Section Duration: 5 minutes
Ben 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.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops