ID로 아이템을 찾는 함수

Coddy JavaScript 여정의 TypeScript 소개 섹션에 포함된 레슨. 73개 중 65번째.

챌린지

쉬움

이전 챌린지에서 제공된 다음 항목들이 있습니다:

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);