Projekt: Generisches Inventar-Element

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

Willkommen zu Ihrem ersten TypeScript-Projekt! Sie werden ein generisches Bestandsverwaltungssystem erstellen, das die praxisnahe Leistungsfähigkeit von Generics demonstriert. Dieses Projekt wird Ihnen zeigen, wie Generics flexiblen, wiederverwendbaren Code erstellen können, der mit verschiedenen Datentypen funktioniert und gleichzeitig die volle Typsicherheit gewährleistet.

Die Grundlage jedes Inventarsystems besteht darin, zu definieren, wie ein Inventarartikel aussieht. In einem traditionellen Ansatz würden Sie möglicherweise separate Schnittstellen für Bücher, Elektronik, Kleidung und andere Produkttypen erstellen. Aber mit Generics können Sie eine flexible Struktur erstellen, die sich an jede Art von Produktdetails anpasst.

Deine erste Aufgabe besteht darin, eine generische Schnittstelle namens InventoryItem<T> zu erstellen. Diese Schnittstelle stellt die gemeinsame Struktur dar, die alle Inventarartikel gemeinsam haben: Sie benötigen eine id zur Identifizierung, eine quantity zur Erfassung der Lagerbestände und eine details-Eigenschaft, die beliebige produktspezifische Informationen aufnehmen kann.

Die Magie geschieht mit dem generischen Typparameter T. Dies ermöglicht es der Eigenschaft details, völlig flexibel zu sein – es könnten Buchinformationen, elektronische Spezifikationen oder beliebige andere Produktdaten sein –, während id und quantity über alle Inventargegenstände hinweg konsistent als Zahlen typisiert bleiben.

Aufgabe

Einfach

Erstelle eine generische Schnittstelle namens InventoryItem, die die Struktur eines beliebigen Bestandsartikels in deinem Verwaltungssystem darstellt.

Die Schnittstelle sollte:

Einen generischen Typparameter T verwenden
Eine Eigenschaft id vom Typ number haben
Eine Eigenschaft quantity vom Typ number haben
Eine Eigenschaft details vom Typ T haben

Erstelle die folgenden Objekte mithilfe deiner generischen Schnittstelle:

bookItem vom Typ InventoryItem<{ title: string; author: string }> mit:
- id: 1
- quantity: 5
- details: { title: "TypeScript Guide", author: "John Doe" }
electronicItem vom Typ InventoryItem<{ brand: string; model: string }> mit:
- id: 2
- quantity: 3
- details: { brand: "TechCorp", model: "X200" }
clothingItem vom Typ InventoryItem<{ size: string; color: string }> mit:
- id: 3
- quantity: 10
- details: { size: "M", color: "Blue" }

Gib die folgenden Ausgaben aus:

Gib bookItem.id aus
Gib bookItem.quantity aus
Gib bookItem.details.title aus
Gib bookItem.details.author aus
Gib electronicItem.details.brand aus
Gib electronicItem.details.model aus
Gib clothingItem.details.size aus
Gib clothingItem.details.color aus

Probier es selbst

// TODO: Schreibe hier deinen Code
// Erstelle das InventoryItem-Interface und die erforderlichen Objekte

// Gib die erforderlichen Ausgaben aus
console.log(bookItem.id);
console.log(bookItem.quantity);
console.log(bookItem.details.title);
console.log(bookItem.details.author);
console.log(electronicItem.details.brand);
console.log(electronicItem.details.model);
console.log(clothingItem.details.size);
console.log(clothingItem.details.color);