アイテムの詳細を取得する関数

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

チャレンジ

簡単

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

プロパティ id、quantity、details を持つジェネリックインターフェース InventoryItem<T>
在庫配列にアイテムを追加するジェネリック関数 addItem
IDでアイテムを検索するジェネリック関数 findItemById
型エイリアス Book、Electronic、BookItem、ElectronicItem
在庫配列 bookStore および electronicStore

InventoryItem<any> を受け取り、型ガードを使用してアイテムの型を特定し、適切な情報を出力する getItemDetails という名前の関数を作成してください。

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

型が InventoryItem<any> であるパラメータ item を受け取ること
in 演算子を使用して、item.details が title プロパティを持っているか確認すること
in 演算子を使用して、item.details が brand プロパティを持っているか確認すること
本である場合は、"Book: [title] by [author]" と出力すること
電子機器である場合は、"Electronic: [brand] [model]" と出力すること
どちらでもない場合は、"Unknown item type" と出力すること
戻り値の型が void であること

テストアイテムを作成してください：

以下の内容を持つ InventoryItem<any> 型の testBook を作成します：
- id: 300
- quantity: 6
- details: { title: "TypeScript Handbook", author: "Microsoft Team" }
以下の内容を持つ InventoryItem<any> 型の testElectronic を作成します：
- id: 400
- quantity: 2
- details: { brand: "Dell", model: "XPS 13" }
以下の内容を持つ InventoryItem<any> 型の unknownItem を作成します：
- id: 500
- quantity: 1
- details: { color: "Red", size: "Large" }

各テストアイテムで getItemDetails を呼び出して、関数をテストしてください：

getItemDetails(testBook) を呼び出す
getItemDetails(testElectronic) を呼び出す
getItemDetails(unknownItem) を呼び出す

また、既存のストアのアイテムでもテストしてください：

findItemById を使用して expandedBookStore 内の ID 100 のアイテムを検索し、その結果を使用して getItemDetails を呼び出します
findItemById を使用して electronicStore 内の ID 200 のアイテムを検索し、その結果を使用して getItemDetails を呼び出します

自分で試してみよう

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