Menu
CoddyTech

Функция получения информации о предмете

Часть раздела Введение в TypeScript путешествия по JavaScript на Coddy. Урок 67 из 73.

challenge icon

Задание

Легко

Вам предоставлены следующие элементы из предыдущего задания:

  • Универсальный интерфейс InventoryItem<T> со свойствами id, quantity и details
  • Универсальная функция addItem, которая добавляет элементы в массивы инвентаря
  • Универсальная функция findItemById, которая ищет элементы по ID
  • Псевдонимы типов Book, Electronic, BookItem и ElectronicItem
  • Массивы инвентаря bookStore и electronicStore

Создайте функцию с именем getItemDetails, которая принимает InventoryItem<any> и использует защитники типов (type guards), чтобы определить тип элемента, а затем выводит соответствующую информацию.

Функция должна:

  • Принимать параметр item типа InventoryItem<any>
  • Использовать оператор in для проверки наличия у item.details свойства title
  • Использовать оператор in для проверки наличия у item.details свойства brand
  • Выводить "Book: [title] by [author]", если это книга
  • Выводить "Electronic: [brand] [model]", если это электроника
  • Выводить "Unknown item type", если это ни то, ни другое
  • Иметь возвращаемый тип void

Создайте тестовые элементы:

  • Создайте testBook типа InventoryItem<any> со следующими данными:
    • id: 300
    • quantity: 6
    • details: { title: "TypeScript Handbook", author: "Microsoft Team" }
  • Создайте testElectronic типа InventoryItem<any> со следующими данными:
    • id: 400
    • quantity: 2
    • details: { brand: "Dell", model: "XPS 13" }
  • Создайте unknownItem типа InventoryItem<any> со следующими данными:
    • id: 500
    • quantity: 1
    • details: { color: "Red", size: "Large" }

Протестируйте вашу функцию, вызвав getItemDetails для каждого тестового элемента:

  • Вызовите getItemDetails(testBook)
  • Вызовите getItemDetails(testElectronic)
  • Вызовите getItemDetails(unknownItem)

Также протестируйте функцию на элементах из ваших существующих магазинов:

  • Используйте findItemById, чтобы найти элемент с ID 100 в expandedBookStore, затем вызовите getItemDetails с полученным результатом
  • Используйте findItemById, чтобы найти элемент с ID 200 в electronicStore, затем вызовите 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);

Все уроки раздела Введение в TypeScript

Потренируйтесь самостоятельно: Песочница TypeScript