Project: A Fully Typed Shopping Cart

What you will build

A small shopping cart program in TypeScript. It will hold typed products, let you add and remove them, total the price, and apply a discount. Every part uses the features from this course — and the type checker will guard you the whole way.

Before we write any code, here is the whole build laid out in order so you always know where you are:

1. Step 1 — model the data: a Category union and a Product interface (types.ts).
2. Step 2 — build a typed Cart class that keeps its items private (cart.ts).
3. Step 3 — add a reusable generic helper that works for any list (helpers.ts).
4. Step 4 — write a discount function that takes a union and narrows it with typeof (discount.ts).
5. Step 5 — wire it all together in a main file, then compile and run it (app.ts).

Step 1 — model the data with a type and an interface

First, describe what a product looks like, and the small set of valid categories.

// types.ts
export type Category = 'electronics' | 'books' | 'food';

export interface Product {
  readonly id: number;
  name: string;
  price: number;
  category: Category;
}

Step 2 — a typed Cart class with private state

The cart keeps its items private so nothing outside can mess with the list directly. Public methods are the only way in.

// cart.ts
import { Product } from './types';

export class Cart {
  private items: Product[] = [];

  add(product: Product): void {
    this.items.push(product);
  }

  remove(id: number): void {
    this.items = this.items.filter(p => p.id !== id);
  }

  total(): number {
    return this.items.reduce((sum, p) => sum + p.price, 0);
  }

  count(): number {
    return this.items.length;
  }
}

Step 3 — a generic helper

Add a reusable, generic helper that works for any array — products, numbers, anything. This is the generics idea earning its keep.

// helpers.ts
export function lastOf<T>(items: T[]): T | undefined {
  return items[items.length - 1];
}

Step 4 — a discount using a union and narrowing

A discount can be a flat amount (a number) or a label like 'half' (a string). We use a union for the input and narrow it with typeof to handle each case.

// discount.ts
export function applyDiscount(total: number, discount: number | 'half'): number {
  if (typeof discount === 'number') {
    return total - discount;       // narrowed: a flat amount
  }
  return total / 2;                // narrowed: the 'half' label
}

Step 5 — put it together and run it

Now the main file imports everything and uses the cart end to end.

// app.ts
import { Cart } from './cart';
import { lastOf } from './helpers';
import { applyDiscount } from './discount';

const cart = new Cart();

cart.add({ id: 1, name: 'Keyboard', price: 1200, category: 'electronics' });
cart.add({ id: 2, name: 'TS Handbook', price: 800, category: 'books' });
cart.add({ id: 3, name: 'Coffee', price: 300, category: 'food' });

cart.remove(3);   // changed our mind about coffee

const subtotal = cart.total();
console.log('Items:', cart.count());
console.log('Subtotal:', subtotal);
console.log('After flat 200 off:', applyDiscount(subtotal, 200));
console.log('After half off:', applyDiscount(subtotal, 'half'));
console.log('Last item id:', lastOf([1, 2]));

Your tasks

• Build all five files and compile them with a tsconfig.json (strict on).
• Add a new Category (e.g. 'clothing') and a product that uses it.
• Add a Cart method itemsIn(category: Category): Product[] that returns only products in one category.
• Add a 'tenth' option to applyDiscount (10% off) and narrow for it.
• Try one mistake on purpose (a wrong price type, an invalid category) and read the error TypeScript gives you.