Integration
- TypeScript course
- Beginner
- Lesson 75/89
- 5 min
Build the working cart by combining all parts.
Combine all parts
The cart project has three main functions: addToCart (add product), total (compute total), applyDiscount (apply discount). When using a cart, you first add products, then compute the total, and finally apply a discount.
function addToCart(cart: Cart, product: Product, quantity: number): Cart { /* ... */ }
function total(cart: Cart): number { /* ... */ }
function applyDiscount(amount: number, percent: number): number { /* ... */ }Working example
If you add apple (price 5, quantity 2) and milk (price 10, quantity 1) to a cart, the total is 20. With a 10% discount, the final price is 18.
const apple: Product = { id: "a", name: "Elma", price: 5 };
const milk: Product = { id: "b", name: "Süt", price: 10 };
const cart: Cart = { items: [] };
addToCart(cart, apple, 2);
addToCart(cart, milk, 1);
const t = total(cart);
const final = applyDiscount(t, 10);
console.log(final); // 18Practice Write the working cart
Define Product, CartItem, Cart interfaces. Write addToCart, total, applyDiscount functions. Add apple (id: "a", price 5) and milk (id: "b", price 10) to the cart (2 apples, 1 milk). Compute the total, apply a 10% discount, and print the final price.
Starter code
// Product, CartItem, Cart arayüzlerini tanımla
// addToCart(cart, product, quantity): Cart yaz
// total(cart): number yaz
// applyDiscount(amount, percent): number yaz
// Elma (id: a, fiyat 5) ve Süt (id: b, fiyat 10) ekle
// toplamı hesapla, %10 indirim uygula, sonucu yazdırSample solution
interface Product { id: string; name: string; price: number; }
interface CartItem { product: Product; quantity: number; }
interface Cart { items: CartItem[]; }
function addToCart(cart: Cart, product: Product, quantity: number): Cart {
const existing = cart.items.find(i => i.product.id === product.id);
if (existing) {
existing.quantity += quantity;
return cart;
}
cart.items.push({ product, quantity });
return cart;
}
function total(cart: Cart): number {
return cart.items.reduce((sum, i) => sum + i.product.price * i.quantity, 0);
}
function applyDiscount(amount: number, percent: number): number {
return amount * (1 - percent / 100);
}
const apple: Product = { id: "a", name: "Elma", price: 5 };
const milk: Product = { id: "b", name: "Süt", price: 10 };
const cart: Cart = { items: [] };
addToCart(cart, apple, 2);
addToCart(cart, milk, 1);
const cartTotal = total(cart);
const finalPrice = applyDiscount(cartTotal, 10);
console.log(finalPrice);Expected output
18
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 In which order is a cart's final price computed?
- First add, then total, then discount Correct answer
- First discount, then add, then total
- First total, then add, then discount
- First add, then discount, then total
Explanation: You add products to the cart, then compute the total of all items, and finally apply a discount to get the final price.
2 Complete the final step
const finalPrice = ____(cartTotal, 10);const finalPrice = applyDiscount(cartTotal, 10);Explanation: The final price is found by applying a percentage discount to the total; so applyDiscount is called. total and addToCart are the wrong step; console.log only prints.
3 Integration flow
| Term | Meaning |
|---|---|
addToCart |
First step: add |
total |
Second step: total |
applyDiscount |
Third step: discount |
finalPrice |
Result |