Функция получения информации о предмете
Часть раздела Введение в TypeScript путешествия по JavaScript на Coddy. Урок 67 из 73.
Задание
ЛегкоВам предоставлены следующие элементы из предыдущего задания:
- Универсальный интерфейс
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: 300quantity: 6details: { title: "TypeScript Handbook", author: "Microsoft Team" }
- Создайте
testElectronicтипаInventoryItem<any>со следующими данными:id: 400quantity: 2details: { brand: "Dell", model: "XPS 13" }
- Создайте
unknownItemтипаInventoryItem<any>со следующими данными:id: 500quantity: 1details: { 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
1Начало работы с TS
Что такое TypeScript?Зачем использовать TypeScript?Ваш первый код на TypeScriptПроцесс компиляции и ошибкиИтоги: Введение в TS4Работа с функциями
Типизация параметров и возвращаемых значенийТипизация стрелочных функцийТип возвращаемого значения 'void'Необязательные параметры с '?'Значения параметров по умолчаниюТипизация Rest-параметровОпределение типов функцийИтоги: Создание типизированных функций7Проект: Простой список задач
Проект: Определение структуры TaskФункция для добавления задачи10Проект: Управление инвентарем
Проект: Универсальный предмет инвентаряФункция: Добавление предметов в инвентарь2Основные типы
Базовые типы: str, num, booleanТип 'any': лазейкаТип 'unknown'Работа с 'null' и 'undef'Вывод типов в действииЯвные аннотации типовИтоги: Практика по основным типам5Типы: псевдонимы, объединения и пересечения
Псевдонимы типов для примитивовТипы объединения ('|')Работа с типами объединенияЛитеральные типыТипы пересечения ('&')Комбинирование псевдонимов типовИтоги: продвинутые комбинации типов3Структуры данных: массивы и кортежи
Типизированные массивыМодификатор 'readonly' для массивовЧто такое кортеж?Объявление кортежей и доступ к нимДеструктуризация кортежейКортежи readonlyМногомерные типизированные массивыОператор spread с массивамиИтоги: массивы и кортежиПотренируйтесь самостоятельно: Песочница TypeScript