Funktion zum Abrufen von Elementdetails

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy. Lektion 67 von 73.

Aufgabe

Einfach

Dir wird Folgendes aus der vorherigen Herausforderung bereitgestellt:

Die generische Schnittstelle InventoryItem<T> mit den Eigenschaften id, quantity und details
Die generische Funktion addItem, die Elemente zu Inventar-Arrays hinzufügt
Die generische Funktion findItemById, die nach Elementen anhand ihrer ID sucht
Typ-Aliase Book, Electronic, BookItem und ElectronicItem
Inventar-Arrays bookStore und electronicStore

Erstelle eine Funktion namens getItemDetails, die ein InventoryItem<any> entgegennimmt und Typwächter verwendet, um den Typ des Elements zu bestimmen, und anschließend passende Informationen ausgibt.

Die Funktion sollte:

Einen Parameter item vom Typ InventoryItem<any> akzeptieren
Den Operator in verwenden, um zu prüfen, ob item.details eine Eigenschaft title besitzt
Den Operator in verwenden, um zu prüfen, ob item.details eine Eigenschaft brand besitzt
"Book: [title] by [author]" ausgeben, wenn es sich um ein Buch handelt
"Electronic: [brand] [model]" ausgeben, wenn es sich um ein elektronisches Gerät handelt
"Unknown item type" ausgeben, wenn es weder das eine noch das andere ist
Den Rückgabetyp void haben

Erstelle Testelemente:

Erstelle testBook vom Typ InventoryItem<any> mit:
- id: 300
- quantity: 6
- details: { title: "TypeScript Handbook", author: "Microsoft Team" }
Erstelle testElectronic vom Typ InventoryItem<any> mit:
- id: 400
- quantity: 2
- details: { brand: "Dell", model: "XPS 13" }
Erstelle unknownItem vom Typ InventoryItem<any> mit:
- id: 500
- quantity: 1
- details: { color: "Red", size: "Large" }

Teste deine Funktion, indem du getItemDetails mit jedem Testelement aufrufst:

Rufe getItemDetails(testBook) auf
Rufe getItemDetails(testElectronic) auf
Rufe getItemDetails(unknownItem) auf

Teste außerdem mit Elementen aus deinen vorhandenen Stores:

Verwende findItemById, um das Element mit der ID 100 in expandedBookStore zu finden, und rufe anschließend getItemDetails mit dem Ergebnis auf
Verwende findItemById, um das Element mit der ID 200 in electronicStore zu finden, und rufe anschließend getItemDetails mit dem Ergebnis auf

Probier es selbst

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