Öğe Detaylarını Getirme Fonksiyonu

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

Görev

Kolay

Önceki meydan okumadan size aşağıdakiler sağlanmıştır:

id, quantity ve details özelliklerine sahip genel arayüz InventoryItem<T>
Envanter dizilerine öğe ekleyen genel fonksiyon addItem
Öğeleri ID'ye göre arayan genel fonksiyon findItemById
Tür takma adları (type aliases) Book, Electronic, BookItem ve ElectronicItem
Envanter dizileri bookStore ve electronicStore

Bir InventoryItem<any> alan ve öğenin hangi türde olduğunu belirlemek için tür korumalarını (type guards) kullanan, ardından uygun bilgileri yazdıran getItemDetails adında bir fonksiyon oluşturun.

Fonksiyon şunları yapmalıdır:

InventoryItem<any> türünde bir item parametresi kabul etmeli
item.details kısmının bir title özelliğine sahip olup olmadığını kontrol etmek için in operatörünü kullanmalı
item.details kısmının bir brand özelliğine sahip olup olmadığını kontrol etmek için in operatörünü kullanmalı
Eğer bir kitapsa "Book: [title] by [author]" yazdırmalı
Eğer bir elektronik eşyaysa "Electronic: [brand] [model]" yazdırmalı
Hiçbiri değilse "Unknown item type" yazdırmalı
Dönüş türü void olmalı

Test öğeleri oluşturun:

Şu özelliklere sahip InventoryItem<any> türünde testBook oluşturun:
- id: 300
- quantity: 6
- details: { title: "TypeScript Handbook", author: "Microsoft Team" }
Şu özelliklere sahip InventoryItem<any> türünde testElectronic oluşturun:
- id: 400
- quantity: 2
- details: { brand: "Dell", model: "XPS 13" }
Şu özelliklere sahip InventoryItem<any> türünde unknownItem oluşturun:
- id: 500
- quantity: 1
- details: { color: "Red", size: "Large" }

Her bir test öğesiyle getItemDetails fonksiyonunu çağırarak fonksiyonunuzu test edin:

getItemDetails(testBook) çağrısını yapın
getItemDetails(testElectronic) çağrısını yapın
getItemDetails(unknownItem) çağrısını yapın

Ayrıca mevcut mağazalarınızdaki öğelerle de test edin:

expandedBookStore içinde ID'si 100 olan öğeyi bulmak için findItemById kullanın, ardından sonuçla getItemDetails fonksiyonunu çağırın
electronicStore içinde ID'si 200 olan öğeyi bulmak için findItemById kullanın, ardından sonuçla getItemDetails fonksiyonunu çağırın

Kendin dene

// Generic interface from previous challenge
interface InventoryItem<T> {
  id: number;
  quantity: number;
  details: T;
}

// Generic functions from previous challenge
function addItem<T>(inventory: InventoryItem<T>[], item: InventoryItem<T>): InventoryItem<T>[] {
  return [...inventory, item];
}

function findItemById<T>(inventory: InventoryItem<T>[], id: number): InventoryItem<T> | undefined {
  return inventory.find(item => item.id === id);
}

// Create specific object types
type Book = {
  title: string;
  author: string;
};

type Electronic = {
  brand: string;
  model: string;
};

// Create type aliases for specific inventory items
type BookItem = InventoryItem<Book>;
type ElectronicItem = InventoryItem<Electronic>;

// Create concrete inventory items
const specificBook: BookItem = {
  id: 100,
  quantity: 8,
  details: { title: "Clean Code", author: "Robert Martin" }
};

const specificElectronic: ElectronicItem = {
  id: 200,
  quantity: 4,
  details: { brand: "Sony", model: "WH-1000XM4" }
};

// Create typed inventory arrays
const bookStore: BookItem[] = [specificBook];
const electronicStore: ElectronicItem[] = [specificElectronic];

// Create additional items and test type system
const anotherBook: BookItem = {
  id: 101,
  quantity: 3,
  details: { title: "Design Patterns", author: "Gang of Four" }
};

const expandedBookStore = addItem(bookStore, anotherBook);

// Print outputs
console.log(specificBook.details.title);
console.log(specificBook.details.author);
console.log(specificElectronic.details.brand);
console.log(specificElectronic.details.model);
console.log(expandedBookStore.length);
console.log(findItemById(expandedBookStore, 101)!.details.title);
console.log(findItemById(electronicStore, 200)!.quantity);
console.log(expandedBookStore[1].details.author);