Sepet tasarımı
- TypeScript kursu
- Başlangıç
- Ders 71/89
- 5 dk
Sepet ve ürün tiplerini tasarlayıp iskeleti yazarsın.
Product ve Cart tipleri
Alışveriş sepeti için üç temel tip tanımlarız. Product bir ürünü temsil eder (id, name, price). CartItem bir ürün ve miktarını birleştirir. Cart ise öğe dizisini içerir.
interface Product { id: string; name: string; price: number; }
interface CartItem { product: Product; quantity: number; }
interface Cart { items: CartItem[]; }Boş sepet iskeleti
Boş bir sepet oluşturmak için items alanı boş dizi olan bir Cart nesnesi tanımlarsın. Bu, sepetin başlangıç durumudur; sonradan ürün eklenerek doldurulur.
const emptyCart: Cart = { items: [] };
console.log(emptyCart.items.length); // 0Uygulama Sepet iskeletini yaz
Product arayüzünü tanımla: id: string, name: string, price: number. CartItem arayüzünü tanımla: product: Product, quantity: number. Cart arayüzünü tanımla: items: CartItem[]. Boş bir sepet oluştur ve öğe sayısını yazdır.
Başlangıç kodu
// Product arayüzü: id, name, price (hepsi string veya number)
// CartItem arayüzü: product ve quantity
// Cart arayüzü: items alanı CartItem dizisi
// emptyCart oluştur (boş sepet)
// öğe sayısını yazdırÖrnek çözüm
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);Beklenen çıktı
0
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir CartItem hangi bilgileri içermelidir?
- Ürün ve miktar Doğru cevap
- Yalnızca ürün adı
- Yalnızca fiyat
- Yalnızca miktar
Açıklama: CartItem, Product ve quantity alanlarını içerir; bu sayede hangi üründen kaç adet olduğunu bilirsin.
2 CartItem alanını tamamla
interface CartItem { product: Product; ____: number; }interface CartItem { product: Product; quantity: number; }Açıklama: CartItem, Product ve quantity alanlarını içerir. count, amount ve size alternatif isimler olsa da TypeScript tasarımında quantity kullanmak tutarlıdır.
3 Sepet tip parçaları
| Kavram | Anlamı |
|---|---|
Product |
Ürün bilgileri (id, name, price) |
CartItem |
Ürün ve miktar |
Cart |
Sepet öğeleri dizisi |
items: CartItem[] |
Sepet içeriği |