Proje: Genel Envanter Öğesi

Coddy'nin JavaScript Journey'sinin TypeScript'e Giriş bölümünün bir parçası — ders 63 / 73.

İlk TypeScript projenize hoş geldiniz! Generic'lerin gerçek dünyadaki gücünü gösteren genel bir envanter yönetim sistemi oluşturmak üzeresiniz. Bu proje size, generic'lerin tam tür güvenliğini korurken farklı veri türleriyle çalışan esnek ve yeniden kullanılabilir kodları nasıl oluşturabileceğini gösterecektir.

Herhangi bir envanter sisteminin temeli, bir envanter öğesinin nasıl görüneceğini tanımlamaktır. Geleneksel bir yaklaşımda kitaplar, elektronik cihazlar, giyim ve diğer ürün türleri için ayrı arayüzler oluşturabilirsiniz. Ancak generic yapılar sayesinde, her türlü ürün detayına uyum sağlayan tek bir esnek yapı oluşturabilirsiniz.

İlk göreviniz, InventoryItem<T> adında genel bir arayüz (generic interface) oluşturmaktır. Bu arayüz, tüm envanter öğelerinin paylaştığı ortak yapıyı temsil edecektir: kimlik belirleme için bir id, stok seviyelerini takip etmek için bir quantity ve ürüne özgü her türlü bilgiyi tutabilen bir details özelliğine ihtiyaç duyarlar.

Sihir, genel tür parametresi T ile gerçekleşir. Bu, details özelliğinin tamamen esnek olmasını sağlar -kitap bilgileri, elektronik özellikler veya başka herhangi bir ürün verisi olabilir- bu sırada id ve quantity tüm envanter öğelerinde tutarlı bir şekilde sayı olarak kalır.

Görev

Kolay

Yönetim sisteminizdeki herhangi bir envanter öğesinin yapısını temsil eden InventoryItem adında genel (generic) bir arayüz oluşturun.

Arayüz şunları içermelidir:

Genel bir tür parametresi T kullanmalı
number türünde bir id özelliğine sahip olmalı
number türünde bir quantity özelliğine sahip olmalı
T türünde bir details özelliğine sahip olmalı

Genel arayüzünüzü kullanarak aşağıdaki nesneleri oluşturun:

Şu özelliklere sahip InventoryItem<{ title: string; author: string }> türünde bookItem:
- id: 1
- quantity: 5
- details: { title: "TypeScript Guide", author: "John Doe" }
Şu özelliklere sahip InventoryItem<{ brand: string; model: string }> türünde electronicItem:
- id: 2
- quantity: 3
- details: { brand: "TechCorp", model: "X200" }
Şu özelliklere sahip InventoryItem<{ size: string; color: string }> türünde clothingItem:
- id: 3
- quantity: 10
- details: { size: "M", color: "Blue" }

Aşağıdaki çıktıları yazdırın:

bookItem.id yazdırın
bookItem.quantity yazdırın
bookItem.details.title yazdırın
bookItem.details.author yazdırın
electronicItem.details.brand yazdırın
electronicItem.details.model yazdırın
clothingItem.details.size yazdırın
clothingItem.details.color yazdırın

Kendin dene

// YAPILACAK: Kodunuzu buraya yazın
// InventoryItem arayüzünü ve gerekli nesneleri oluşturun

// Gerekli çıktıları yazdırın
console.log(bookItem.id);
console.log(bookItem.quantity);
console.log(bookItem.details.title);
console.log(bookItem.details.author);
console.log(electronicItem.details.brand);
console.log(electronicItem.details.model);
console.log(clothingItem.details.size);
console.log(clothingItem.details.color);