Search⌘ K
AI Features
Home
Courses
Mastering TypeScript

Binding the Shopping Cart Collection to the App Component

Understand how to initialize a shopping cart collection with TypeScript interfaces and classes, then bind it to a Vue app component. This lesson shows how to manage and pass data between components for maintaining shopping cart state.

We'll cover the following...

Initializing the shopping cart collection

Let’s start our application by updating our App.vue component. The App component will just be the entry point to our application and will hold the collection of items that are in our shopping cart. For the purposes of this application, we will just create a static set of items in a file named CartItems.ts as follows:

TypeScript 4.9.5
export interface IProduct {
  id: number;
  name: string;
  type: string;
  image: string;
  longDescription?: string;
  amount?: number;
  specs: ISpecs;
}
export interface ISpecs {
  actuationForce?: string;
  actuationPoint?: string;
  bottomOut?: string;
  bottomOutTravel?: string;
  price: string;
}
export class CartCollection {
  items: IProduct[];
  constructor() {
    this.items = [
      {
        id: 1,
        name: "Holy Panda",
        type: "Tactile",
        image: "holy_panda.png",
        amount: 70,
        specs: {
          price: "1.60",
        },
      },
      // Other items will be added here
    ];
  }
}

  • We have ...