IDでアイテムを検索する関数

CoddyのJavaScriptジャーニー「Introduction To TypeScript」セクションの一部。レッスン 65/73。

チャレンジ

簡単

前のチャレンジから、以下の内容が提供されています：

プロパティ id、quantity、details を持つジェネリックインターフェース InventoryItem<T>
在庫配列にアイテムを追加するジェネリック関数 addItem
さまざまな在庫アイテムと更新された在庫配列

IDによって在庫配列内のアイテムを検索する、findItemById という名前のジェネリック関数を作成してください。

この関数は以下の条件を満たす必要があります：

ジェネリック型パラメータ T を使用する
InventoryItem<T>[] 型のパラメータ inventory を受け取る
number 型のパラメータ id を受け取る
見つかった InventoryItem<T> 型のアイテム、または見つからない場合は undefined を返す
InventoryItem<T> | undefined という明示的な戻り値の型注釈を持つ

テスト用の在庫を作成してください：

以下の内容を含む配列として mixedBookInventory を作成します：
- id: 10, quantity: 3, details: { title: "JavaScript Basics", author: "Alice Brown" } のアイテム
- id: 11, quantity: 7, details: { title: "React Fundamentals", author: "Bob Wilson" } のアイテム
- id: 12, quantity: 2, details: { title: "Node.js Guide", author: "Carol Davis" } のアイテム
以下の内容を含む配列として mixedElectronicInventory を作成します：
- id: 20, quantity: 5, details: { brand: "Samsung", model: "Galaxy S23" } のアイテム
- id: 21, quantity: 1, details: { brand: "Apple", model: "iPhone 15" } のアイテム

関数をテストし、以下の出力を表示してください：

mixedBookInventory 内で ID 11 のアイテムを検索し、結果の details.title を表示する（見つからない場合は undefined）
mixedElectronicInventory 内で ID 20 のアイテムを検索し、結果の details.brand を表示する（見つからない場合は undefined）
mixedBookInventory 内で ID 99 のアイテムを検索し、結果を表示する（undefined になるはずです）
mixedBookInventory 内で ID 12 のアイテムを検索し、結果の quantity を表示する（見つからない場合は undefined）
mixedElectronicInventory 内で ID 21 のアイテムを検索し、結果の details.model を表示する（見つからない場合は undefined）
mixedBookInventory 内で ID 10 のアイテムを検索し、結果の id を表示する（見つからない場合は undefined）
mixedElectronicInventory 内で ID 50 のアイテムを検索し、結果を表示する（undefined になるはずです）

自分で試してみよう

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

// Items from previous challenge
const bookItem: InventoryItem<{ title: string; author: string }> = {
  id: 1,
  quantity: 5,
  details: { title: "TypeScript Handbook", author: "John Doe" }
};

const electronicItem: InventoryItem<{ brand: string; model: string }> = {
  id: 2,
  quantity: 3,
  details: { brand: "TechCorp", model: "X100" }
};

const clothingItem: InventoryItem<{ size: string; color: string }> = {
  id: 3,
  quantity: 10,
  details: { size: "M", color: "Blue" }
};

// Generic function to add item to inventory
function addItem<T>(inventory: InventoryItem<T>[], newItem: InventoryItem<T>): InventoryItem<T>[] {
  return [...inventory, newItem];
}

// Create book inventory and new book
const bookInventory = [bookItem];
const newBook: InventoryItem<{ title: string; author: string }> = {
  id: 4,
  quantity: 2,
  details: { title: "Advanced TypeScript", author: "Jane Smith" }
};
const updatedBookInventory = addItem(bookInventory, newBook);

// Create electronic inventory and new electronic
const electronicInventory = [electronicItem];
const newElectronic: InventoryItem<{ brand: string; model: string }> = {
  id: 5,
  quantity: 1,
  details: { brand: "GadgetCorp", model: "Z500" }
};
const updatedElectronicInventory = addItem(electronicInventory, newElectronic);

// Print outputs
console.log(updatedBookInventory.length);
console.log(updatedBookInventory[1].details.title);
console.log(updatedBookInventory[1].details.author);
console.log(updatedElectronicInventory.length);
console.log(updatedElectronicInventory[1].details.brand);
console.log(updatedElectronicInventory[1].details.model);
console.log(updatedElectronicInventory[0].id);
console.log(updatedElectronicInventory[1].quantity);