Index-Signaturen für Objekte

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

Manchmal müssen Sie mit Objekten arbeiten, bei denen Sie wissen, welche Art von Werten sie enthalten werden, aber die spezifischen Eigenschaftsnamen im Voraus nicht kennen. Dies kommt häufig vor, wenn man mit Dictionaries, Maps oder Konfigurationsobjekten arbeitet, bei denen die Schlüssel dynamisch sind.

Index-Signaturen ermöglichen es Ihnen, die Typstruktur für solche Objekte zu definieren. Die Syntax verwendet eckige Klammern, um den Schlüsseltyp und den Werttyp anzugeben:

interface StringDictionary {
  [key: string]: number;
}

Dieses Interface besagt: „Jeder String-Schlüssel wird einen Zahlenwert haben.“ Sie können dann Objekte erstellen, die diesem Muster entsprechen:

let scores: StringDictionary = {
  "alice": 95,
  "bob": 87,
  "charlie": 92
};

Index-Signaturen sind besonders nützlich für Szenarien wie das Speichern von Benutzereinstellungen, das Cachen von Daten mit dynamischen Schlüsseln oder die Arbeit mit API-Antworten, bei denen die Eigenschaftsnamen zur Kompilierzeit nicht bekannt sind. Der Schlüsseltyp ist normalerweise string oder number, während der Werttyp jeder gültige TypeScript-Typ sein kann.

Aufgabe

Einfach

Erstellen Sie ein Interface für ein Produktkatalog-System, in dem Produktkategorien und deren Lagerbestände dynamisch gespeichert werden.

Erstellen Sie ein Interface namens ProductCatalog, das eine Index-Signatur verwendet, um String-Schlüssel (Produktnamen) auf Number-Werte (Lagerbestände) abzubilden.

Erstellen Sie eine Funktion namens getStockLevel, die:

Zwei Parameter entgegennimmt: catalog vom Typ ProductCatalog und productName vom Typ string
Die Lagerbestandsmenge für den angegebenen Produktnamen zurückgibt
0 zurückgibt, wenn das Produkt nicht im Katalog existiert
Einen expliziten Rückgabetyp number hat

Erstellen Sie eine Funktion namens updateStock, die:

Drei Parameter entgegennimmt: catalog vom Typ ProductCatalog, productName vom Typ string und newQuantity vom Typ number
Die Lagerbestandsmenge für das angegebene Produkt aktualisiert
void zurückgibt

Erstellen Sie eine Funktion namens getTotalStock, die:

Einen Parameter catalog vom Typ ProductCatalog entgegennimmt
Die Summe aller Lagerbestände im Katalog zurückgibt
Einen expliziten Rückgabetyp number hat

Erstellen Sie Testdaten:

Erstellen Sie inventory vom Typ ProductCatalog mit den folgenden Produkten:
- "laptop": 15
- "mouse": 50
- "keyboard": 25
- "monitor": 8

Testen Sie Ihre Funktionen und geben Sie die folgenden Ergebnisse aus:

Rufen Sie getStockLevel mit inventory und "laptop" auf
Rufen Sie getStockLevel mit inventory und "tablet" auf
Rufen Sie getTotalStock mit inventory auf
Rufen Sie updateStock mit inventory, "mouse" und 75 auf
Rufen Sie updateStock mit inventory, "webcam" und 12 auf
Rufen Sie getStockLevel mit inventory und "mouse" auf
Rufen Sie getStockLevel mit inventory und "webcam" auf
Rufen Sie getTotalStock mit inventory auf

Probier es selbst

// TODO: Schreibe hier deinen Code

// Erstelle das ProductCatalog Interface


// Erstelle die getStockLevel Funktion


// Erstelle die updateStock Funktion


// Erstelle die getTotalStock Funktion


// Erstelle Testdaten - inventory Objekt


// Teste die Funktionen und gib die Ergebnisse aus
console.log(getStockLevel(inventory, "laptop"));
console.log(getStockLevel(inventory, "tablet"));
console.log(getTotalStock(inventory));
updateStock(inventory, "mouse", 75);
updateStock(inventory, "webcam", 12);
console.log(getStockLevel(inventory, "mouse"));
console.log(getStockLevel(inventory, "webcam"));
console.log(getTotalStock(inventory));