Cart design

Design cart and product types and write the skeleton.

Product and Cart types

We define three core types for a shopping cart. Product represents a product (id, name, price). CartItem pairs a product with a quantity. Cart holds an array of items.

interface Product { id: string; name: string; price: number; }
interface CartItem { product: Product; quantity: number; }
interface Cart { items: CartItem[]; }

Empty cart skeleton

To create an empty cart, you define a Cart object whose items field is an empty array. This is the initial state of the cart; it gets filled later by adding products.

const emptyCart: Cart = { items: [] };
console.log(emptyCart.items.length);  // 0

Exercise Write the cart skeleton

Define a Product interface: id: string, name: string, price: number. Define a CartItem interface: product: Product, quantity: number. Define a Cart interface: items: CartItem[]. Create an empty cart and print the number of items.

Show example solution

interface Product {
  id: string;
  name: string;
  price: number;
}

interface CartItem {
  product: Product;
  quantity: number;
}

interface Cart {
  items: CartItem[];
}

const emptyCart: Cart = { items: [] };
console.log(emptyCart.items.length);

Test yourself

What information should a CartItem contain?
- Product and quantity
- Only the product name
- Only the price
- Only the quantity
Show answer

Product and quantity — A CartItem contains a Product and a quantity; this way we know which product and how many of it.

Complete the CartItem field

interface CartItem { product: Product; ____: number; }

Show answer

interface CartItem { product: Product; quantity: number; }

Cart type parts

Product

Product details (id, name, price)
CartItem

Product and quantity
Cart

Array of cart items
items: CartItem[]

Cart contents

Next lesson: Add product

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies