Ürün ekleme
- TypeScript kursu
- Başlangıç
- Ders 72/89
- 5 dk
Ürün eklemeyi ve miktar güncellemeyi öğrenirsin.
Ürün ekleme mantığı
addToCart fonksiyonu, sepete ürün ekler. Önce ürünün sepette olup olmadığını find ile kontrol eder; varsa miktarını artırır, yoksa yeni öğe ekler. Bu, aynı üründen birden çok kez eklendiğinde tekrar tekrar öğe oluşturmaz.
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;
} else {
cart.items.push({ product, quantity });
}
return cart;
}Miktar güncelleme
Mevcut öğeyi bulduğunda miktarını güncellersin. += operatörü kısa yoldur; aynı anlamda existing.quantity = existing.quantity + quantity de yazabilirsin. Her iki yol da geçerlidir.
existing.quantity += quantity;
// eşittir: existing.quantity = existing.quantity + quantity;Yeni öğe eklerken cart.items.push({ product, quantity }) kullanırsın.
Uygulama addToCart fonksiyonu yaz
Product, CartItem, Cart arayüzlerini tanımla. addToCart(cart: Cart, product: Product, quantity: number): Cart fonksiyonu yaz: ürün sepette varsa miktarını artır, yoksa cart.items.push ile yeni öğe ekle. Aynı ürünü iki kez ekle ve son miktarı yazdır.
Başlangıç kodu
// Product, CartItem, Cart arayüzlerini tanımla
// addToCart(cart, product, quantity): Cart yaz
// ürün sepette varsa miktarını artır
// yoksa yeni CartItem ekle
// aynı ürünü iki kez ekle, son miktarı yazdırÖrnek çözüm
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;
}
const cart: Cart = { items: [] };
const apple: Product = { id: "a1", name: "Elma", price: 5 };
addToCart(cart, apple, 2);
addToCart(cart, apple, 3);
console.log(cart.items[0].quantity);Beklenen çıktı
5
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Sepette aynı üründen zaten varsa ne yapmalısın?
- Ürünü ikinci kez ekle
- Eski öğeyi sil
- Hata fırlat
- Miktarı artır Doğru cevap
Açıklama: Aynı üründen sepette varsa, yeni öğe eklemek yerine mevcut öğenin miktarını artırmalısın. Bu, tekrarları önler.
2 find koşulunu tamamla
const existing = cart.items.find(i => i.product.id === ____);const existing = cart.items.find(i => i.product.id === product.id);Açıklama: Mevcut öğeyi ürün kimliğine göre bulursun: i.product.id === product.id. product bir nesnedir, i.id ve i.quantity CartItem üzerinde yok ya da yanlış türdedir.
3 Ürün ekleme parçaları
| Kavram | Anlamı |
|---|---|
cart.items.find(...) |
Mevcut öğeyi bul |
existing.quantity += quantity |
Miktarı artır |
cart.items.push(...) |
Yeni öğe ekle |
addToCart |
Sepete ürün ekler |