Ty­pe­Script Enums: So de­fi­nie­ren Sie konstante Werte für Variablen

Bei Ty­pe­Script Enums handelt es sich um eine Son­der­klas­se, die aus kon­stan­ten Variablen besteht. Den Wert dieser Variablen können Sie im Vorfeld de­fi­nie­ren. Man un­ter­schei­det zwischen nu­me­ri­schen und string­ba­sier­ten Enums.

Was sind Ty­pe­Script Enums?

Unter Enums (kurz für „enu­me­ra­ted types“, also „Auf­zäh­lungs­ty­pen“) versteht man Da­ten­ty­pen, die eine endliche Wer­te­men­ge haben. Diese Wer­te­men­ge wird bereits während der De­kla­ra­ti­on eines Enums mit einem Iden­ti­fi­ka­tor klar definiert und lässt sich im Nach­hin­ein nicht abändern. Auch die Rei­hen­fol­ge, in der die Werte er­schei­nen dürfen, kann im Vorfeld fest­ge­legt werden. Mit Ty­pe­Script Enums können Sie konstante Variablen erstellen, die die Les­bar­keit Ihres Codes erhöhen und gleich­zei­tig Fehler vermeiden. Es handelt sich dabei um eines der wenigen Features, das keine statisch ty­pi­sier­te Er­wei­te­rung von Ja­va­Script ist. Man un­ter­schei­det zwischen nu­me­ri­schen und string­ba­sier­ten Ty­pe­Script Enums. Wir stellen Ihnen beide Varianten vor.

Nu­me­ri­sche Ty­pe­Script Enums

Bei nu­me­ri­schen Ty­pe­Script Enums ist der erste Wert stan­dard­mä­ßig „0“. Im Anschluss wird jeder weitere Wert um „1“ erhöht. Die Methode wird mit dem Parameter enum initiiert und speichert Strings im Zah­len­for­mat. In einem einfachen Beispiel legen wir die Monate fest und weisen ihnen im ersten Schritt einen Wert zu. An­schlie­ßend fragen wir den fest­ge­leg­ten 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 stan­dard­mä­ß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 tat­säch­li­chen Num­me­rie­rung der Monate deckt, in­itia­li­sie­ren wir die Ty­pe­Script Enums und weisen ihnen selbst die passenden Werte zu. Dafür müssen wir den Code von oben nur ge­ring­fü­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 ge­wünsch­ten Wert zu­zu­wei­sen. Das System zählt dann wieder wie gewohnt jeweils um eine Stelle weiter.

Eigene nu­me­ri­sche Werte zuweisen

Möchten Sie die au­to­ma­ti­sche Zählweise ver­hin­dern, können Sie jedem Wert der Ty­pe­Script Enums auch einen eigenen Zah­len­wert zuweisen. Im folgenden Beispiel haben wir vier Bände einer Ro­man­se­rie und möchten deren Sei­ten­zahl als festen Wert hin­ter­le­gen. Im Anschluss wollen wir uns zur Über­prü­fung für den zweiten Band die Sei­ten­an­zahl 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

String­ba­sier­te Ty­pe­Script Enums

String­ba­sier­te Ty­pe­Script Enums funk­tio­nie­ren nach einem sehr ähnlichen Prinzip. In diesem Fall weisen Sie den Enums al­ler­dings keinen Zah­len­wert, sondern einen String zu. Im folgenden Beispiel versehen wir die Wo­chen­ta­ge jeweils mit einem passenden Kürzel im Format String, welches wir in An­füh­rungs­stri­che setzen. Dann rufen wir zur Über­prü­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 kom­bi­nie­ren

Theo­re­tisch ist es auch möglich, nu­me­ri­sche und string­ba­sier­te Ty­pe­Script Enums zu kom­bi­nie­ren. Die An­wen­dungs­fäl­le für diese Option sind insgesamt eher über­schau­bar, aber der Voll­stän­dig­keit halber zeigen wir Ihnen auch dafür ein Beispiel. Hierbei legen wir un­ter­schied­li­che 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 Da­ten­ty­pen

Die Logik des Reverse Mappings (sinngemäß „um­ge­kehr­te Zuordnung“) besagt folgendes: Wenn Sie auf den Wert eines Ty­pe­Script Enums zugreifen können, können Sie gleich­zei­tig auch Zugriff auf seinen Namen erhalten. Um dieses Prinzip zu ver­an­schau­li­chen, wählen wir wieder unser Beispiel mit den Wo­chen­ta­gen:

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

In diesem Beispiel gibt Wochentage.Freitag den Wert „5“ aus. Das gilt auch für Wochentage["Freitag"]. Durch das Reverse Mapping wird al­ler­dings Wochentage[5] den Namen „Freitag“ zu­rück­ge­ben. 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
}

Ty­pe­Script Enums in Array umwandeln

Es ist auch möglich, Ty­pe­Script Enums in Ty­pe­Script-Arrays um­zu­wan­deln. Für unser Beispiel mit den Wo­chen­ta­gen 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' }
]