Dictionary in TypeScript

JavaScript kennt selbst keine Dictionaries, aber über Objekte oder Maps lassen sich Dictionaries nachbilden. Siehe dazu Dictionary in JavaScript.

Was ist ein Dictionary?

Dictionaries ähneln auf den ersten Blick Arrays, das heißt sie können eine beliebige Menge an einzelnen Datenobjekten (Elemente, member, properties) speichern. Bei einem Dictionary gehört zu einem Element (value) immer ein eineindeutiger Schlüssel (key).

Was ist der Unterschied zum Array?

Der große Unterschied zu Arrays ist nun, dass man bei einem Dictionary auf die einzelnen members über den Key direkt zugreifen kann. Sucht man also bei einem Array nach einem bestimmten Element, muss man das gesamte Array durchlaufen, bis man es gefunden hat. Bei einem Dictionary bekommt man das gesuchte Element "per Direktzugriff", so lange man den Key kennt. Das ist deutlich performanter.

Auch wenn JavaScript die praktische Array-Funktion ".find()" hat, mit denen man ein Element in einem Array finden kann, wird dabei im Hintergrund das gesamte Array durchlaufen. Bei großen Datenmengen kann eine Anwendung dadurch schnell langsam werden.

Ein weiterer Unterschied zu Arrays ist, dass doppelte Elemente (also zwei Elemente mit dem gleichen Key) ausgeschlossen sind, denn zu jedem Key kann es nur einen Value geben.

Definition eines Dictionary in TypeScript

In TypeScript lassen sich Dictionaries als Record so definieren:

var products: Record.TKey, TValue>

Konkrete Beispiele:

class MyWarehouse {
  name: string;
  products: Record.number, IProduct.;
  suppliers: Record.string, ISupplier.;
  someOtherProp: Record.string, number.;
}

Der erste Parameter des Records ist der Key, der zweite der eigentliche Wert. Der Typ des Wertes kann einfach oder komplex, also ein eigenes Objekt sein.

Zugriff auf das Record bzw. Dictionary

interface IProduct {
  name: string;
  description?: string;
  price: number;
}

const products: Record.string, IProduct. = {
  "q3X4": {
    name: "Bicycle",
    price: 500
  },
  "x123": {
    name: "Laptop",
    description: "A portable computer",
    price: 1000
  }
}

console.log(products["x123"].name); // prints: "Laptop"

products["abc1"] = {
  name: "Water bottle",
  price: 0.50
}

console.log(products["abc1"].price; // prints: 0.5