TypeScript Enums: So definieren Sie konstante Werte für Variablen

Bei TypeScript Enums handelt es sich um eine Sonderklasse, die aus konstanten Variablen besteht. Den Wert dieser Variablen können Sie im Vorfeld definieren. Man unterscheidet zwischen numerischen und stringbasierten Enums.

Was sind TypeScript Enums?

Unter Enums (kurz für „enumerated types“, also „Aufzählungstypen“) versteht man Datentypen, die eine endliche Wertemenge haben. Diese Wertemenge wird bereits während der Deklaration eines Enums mit einem Identifikator klar definiert und lässt sich im Nachhinein nicht abändern. Auch die Reihenfolge, in der die Werte erscheinen dürfen, kann im Vorfeld festgelegt werden. Mit TypeScript Enums können Sie konstante Variablen erstellen, die die Lesbarkeit Ihres Codes erhöhen und gleichzeitig Fehler vermeiden. Es handelt sich dabei um eines der wenigen Features, das keine statisch typisierte Erweiterung von JavaScript ist. Man unterscheidet zwischen numerischen und stringbasierten TypeScript Enums. Wir stellen Ihnen beide Varianten vor.

Numerische TypeScript Enums

Bei numerischen TypeScript Enums ist der erste Wert standardmäßig „0“. Im Anschluss wird jeder weitere Wert um „1“ erhöht. Die Methode wird mit dem Parameter enum initiiert und speichert Strings im Zahlenformat. In einem einfachen Beispiel legen wir die Monate fest und weisen ihnen im ersten Schritt einen Wert zu. Anschließend fragen wir den festgelegten Wert für den Monat April ab:

enum Monate {
	Januar,
	Februar,
	Maerz,
	April,
	Mai,
	Juni,
	Juli,
	August,
	September,
	Oktober,
	November,
	Dezember
}
let aktuellerMonat = Monate.April;
console.log(aktuellerMonat);

Die Ausgabe sieht so aus:

3

Das System startet die Zuordnung der Werte standardmäßig mit „0“. Januar erhält also den Wert „0“, Februar den Wert „1“, März den Wert „2“ und April den gesuchten Wert „3“. Da sich das nicht mit der tatsächlichen Nummerierung der Monate deckt, initialisieren wir die TypeScript Enums und weisen ihnen selbst die passenden Werte zu. Dafür müssen wir den Code von oben nur geringfügig ändern:

enum Monate {
	Januar = 1,
	Februar,
	Maerz,
	April,
	Mai,
	Juni,
	Juli,
	August,
	September,
	Oktober,
	November,
	Dezember
}
let aktuellerMonat = Monate.April;
console.log(aktuellerMonat);

Nun lautet unsere Ausgabe so:

4

Es reicht dabei aus, lediglich dem ersten Monat den gewünschten Wert zuzuweisen. Das System zählt dann wieder wie gewohnt jeweils um eine Stelle weiter.

Eigene numerische Werte zuweisen

Möchten Sie die automatische Zählweise verhindern, können Sie jedem Wert der TypeScript Enums auch einen eigenen Zahlenwert zuweisen. Im folgenden Beispiel haben wir vier Bände einer Romanserie und möchten deren Seitenzahl als festen Wert hinterlegen. Im Anschluss wollen wir uns zur Überprüfung für den zweiten Band die Seitenanzahl ausgeben lassen. Im Code liest sich das wie folgt:

enum Seitenzahl {
	Band1 = 491,
	Band2 = 406,
	Band3 = 360,
	Band4 = 301
}
let seiten = Seitenzahl.Band2;
console.log(seiten);

Unsere Ausgabe ist dann diese:

406

Stringbasierte TypeScript Enums

Stringbasierte TypeScript Enums funktionieren nach einem sehr ähnlichen Prinzip. In diesem Fall weisen Sie den Enums allerdings keinen Zahlenwert, sondern einen String zu. Im folgenden Beispiel versehen wir die Wochentage jeweils mit einem passenden Kürzel im Format String, welches wir in Anführungsstriche setzen. Dann rufen wir zur Überprüfung die Werte für „Freitag“ und „Dienstag“ ab. So sieht der Code aus:

enum Wochentage {
Montag = "Mo",
Dienstag = "Di",
Mittwoch = "Mi",
Donnerstag = "Do",
Freitag = "Fr",
Samstag = "Sa",
Sonntag = "So"
};
console.log(Wochentage.Freitag);
console.log(Wochentage.Dienstag);

Die dazu passende Ausgabe ist diese:

Fr
Di

Nummern und Strings kombinieren

Theoretisch ist es auch möglich, numerische und stringbasierte TypeScript Enums zu kombinieren. Die Anwendungsfälle für diese Option sind insgesamt eher überschaubar, aber der Vollständigkeit halber zeigen wir Ihnen auch dafür ein Beispiel. Hierbei legen wir unterschiedliche Werte fest. Das Prozedere bleibt trotzdem gleich:

enum Wochentage {
Montag = "Mo",
Dienstag = 2,
Mittwoch = 3,
Donnerstag = "Do",
Freitag = "Fr",
Samstag = 6,
Sonntag = "So"
};
console.log(Wochentage.Freitag);
console.log(Wochentage.Dienstag);

Unsere Ausgabe liest sich nun wie folgt:

Fr
2

Reverse Mapping für konstante Datentypen

Die Logik des Reverse Mappings (sinngemäß „umgekehrte Zuordnung“) besagt folgendes: Wenn Sie auf den Wert eines TypeScript Enums zugreifen können, können Sie gleichzeitig auch Zugriff auf seinen Namen erhalten. Um dieses Prinzip zu veranschaulichen, wählen wir wieder unser Beispiel mit den Wochentagen:

enum Wochentage {
Montag = 1,
Dienstag,
Mittwoch,
Donnerstag,
Freitag,
Samstag,
Sonntag
};
Wochentage.Freitag
Wochentage["Freitag"];
Wochentage[6];

In diesem Beispiel gibt Wochentage.Freitag den Wert „6“ aus. Das gilt auch für Wochentage["Freitag"]. Durch das Reverse Mapping wird allerdings Wochentage[6] den Namen „Freitag“ zurückgeben. Das zeigen wir mit dieser einfachen Anweisung:

enum Wochentage {
Montag = 1,
Dienstag,
Mittwoch,
Donnerstag,
Freitag,
Samstag,
Sonntag
};
console.log(Wochentage);

Wir erhalten dadurch die folgende Ausgabe:

{
    '1': 'Montag',
    '2': 'Dienstag',
    '3': 'Mittwoch',
    '4': 'Donnerstag',
    '5': 'Freitag',
    '6': 'Samstag',
    '7': 'Sonntag',
    Montag: 1,
    Dienstag: 2,
    Mittwoch: 3,
    Donnerstag: 4,
    Freitag: 5,
    Samstag: 6,
    Sonntag: 7
}

TypeScript Enums in Array umwandeln

Es ist auch möglich, TypeScript Enums in TypeScript-Arrays umzuwandeln. Für unser Beispiel mit den Wochentagen sieht der Code dafür so aus:

enum Wochentage {
Montag = "Mo",
Dienstag = "Di",
Mittwoch = "Mi",
Donnerstag = "Do",
Freitag = "Fr",
Samstag = "Sa",
Sonntag = "So"
};
const wochentageArray: { label: string; value: string }[] = [];
for (const key in Wochentage) {
    if (Wochentage.hasOwnProperty(key)) {
        wochentageArray.push({ label: key, value: Wochentage[key] });
    }
}
console.log(wochentageArray);

Dadurch erhalten wir diese Ausgabe:

[
    { label: 'Montag', value: 'Mo' },
    { label: 'Dienstag', value: 'Di' },
    { label: 'Mittwoch', value: 'Mi' },
    { label: 'Donnerstag', value: 'Do' },
    { label: 'Freitag', value: 'Fr' },
    { label: 'Samstag', value: 'Sa' },
    { label: 'Sonntag', value: 'So' }
]