TypeScript-Aufzählungstypen im Detail erklären

TypeScript-Aufzählungstypen im Detail erklären

Vorwort:

TypeScript fügt Enumerationstypen basierend auf den ursprünglichen ES-Typen hinzu, sodass einer Gruppe von Werten auch in TypeScript ein Name zugewiesen werden kann. Dies ist entwicklerfreundlicher und es ist verständlich, dass eine Enumeration ein Wörterbuch ist.

Aufzählungstypen werden mit enum definiert:

Aufzählung Tag {
  SONNTAG,
  MONTAG,
  DIENSTAG,
  MITTWOCH,
  DONNERSTAG,
  FREITAG,
  SAMSTAG
 }

Der oben definierte Aufzählungstyp Day hat 7 Werte. TypeScript weist jedem von ihnen Zahlen zu, standardmäßig beginnend bei 0. Bei der Verwendung können Sie die Namen verwenden, ohne sich die Entsprechung zwischen Zahlen und Namen merken zu müssen:

Aufzählung Tag {
  SONNTAG = 0,
  MONTAG = 1,
  DIENSTAG = 2,
  MITTWOCH = 3,
  DONNERSTAG = 4,
  FREITAG = 5,
  SAMSTAG = 6
}

So sieht der obige Code nach der Übersetzung in JavaScript aus:

var Tag = void 0;
(Funktion (Tag) {
  Tag[Tag["SONNTAG"] = 0] = "SONNTAG";
  Tag[Tag["MONTAG"] = 1] = "MONTAG";
  Tag[Tag["DIENSTAG"] = 2] = "DIENSTAG";
  Tag[Tag["MITTWOCH"] = 3] = "MITTWOCH";
  Tag[Tag["DONNERSTAG"] = 4] = "DONNERSTAG";
  Tag[Tag["FREITAG"] = 5] = "FREITAG";
  Tag[Tag["SAMSTAG"] = 6] = "SAMSTAG";
})(Tag || (Tag = {}));

Wie Sie sehen, ist jedem Wert eine entsprechende Nummer zugeordnet.

In TypeScript müssen wir die Punktform verwenden, um die Mitglieder des Aufzählungssatzes zu erhalten:

console.log(Tag.SONNTAG) // 0
console.log(Tag.MONTAG) // 1

Nachdem wir über die grundlegende Verwendung von Aufzählungstypen gesprochen haben, werfen wir einen Blick auf die gängigen Aufzählungstypen.

1. Digitale Aufzählung

Wenn im obigen Beispiel nur der Konstantenname angegeben wird, wird eine Reihe von Zahlen definiert, die bei 0 beginnt und standardmäßig ansteigt. Dies wird als digitale Aufzählung bezeichnet. Wenn Sie mit dem Inkrementieren bei einem anderen Wert beginnen möchten, können Sie den Index des ersten Werts angeben:

Aufzählung Farbe {
  Rot = 2,
  Blau,
  Gelb
}
console.log(Farbe.Rot, Farbe.Blau, Farbe.Gelb); // 2 3 4

Sie können einen Indexwert für ein Feld angeben. Die nicht angegebenen Indexwerte werden um eins erhöht:

//Einige Felder angeben und für andere den inkrementellen Standardindex verwenden enum Status {
  Ok = 200,
  Erstellt,
  Akzeptiert,
  Ungültige Anfrage = 400,
  Nicht autorisiert
}
console.log(Status.Erstellt, Status.Akzeptiert, Status.Nicht autorisiert); // 201 202 401

Darüber hinaus können Sie für jedes Feld diskontinuierliche beliebige Indexwerte angeben:

Aufzählungsstatus {
  Erfolg = 200,
  Nicht gefunden = 404,
  Fehler = 500
}
console.log(Status.Erfolgreich, Status.Nicht gefunden, Status.Fehler); // 200 404 500

Numerische Aufzählungen können bei der Wertedefinition berechnete Werte und Konstanten verwenden. Beachten Sie jedoch, dass, wenn ein Feld einen berechneten Wert oder eine Konstante verwendet, das unmittelbar folgende Feld mit einem Anfangswert festgelegt werden muss. Der Standardinkrementwert kann hier nicht verwendet werden. Schauen wir uns ein Beispiel an:

// Der Anfangswert ist der berechnete Wert const getValue = () => {
  gebe 0 zurück;
};
enum ErrorIndex {
  a = getValue(),
  b, // Fehleraufzählungsmitglieder müssen Werte initialisiert haben c
}
enum RightIndex {
  a = getValue(),
  b = 1,
  C
}
// Der Anfangswert ist eine Konstante const Start = 1;
Aufzählungsindex {
  a = Anfang,
  b, // Fehleraufzählungsmitglieder müssen Werte initialisiert haben c
}

2. Zeichenfolgenaufzählung

TypeScript nennt eine Enumeration, deren Wert ein Stringliteral ist, eine Stringenumeration. Ein Stringenumerationswert erfordert, dass der Wert jedes Felds ein Stringliteral oder ein anderes Stringenumerationselement im Enumerationswert sein muss:

// Verwenden des Stringliteral-Enums Message {
  Error = "Entschuldigung, Fehler",
  Erfolg = „Hoho, Erfolg“
}
console.log(Message.Error); // 'Entschuldigung, Fehler'

// Andere Enumerationselemente im Enumerationswert verwenden enum Message {
  Error = "Fehlermeldung",
  ServerError = Fehler,
  ClientError = Fehler
}
console.log(Message.Error); // 'Fehlermeldung'
console.log(Message.ServerError); // 'Fehlermeldung'

Hinweis: Die anderen Enumerationsmitglieder beziehen sich hier auf die Enumerationsmitglieder im gleichen Enumerationswert. Da Zeichenfolgenenumerationen keine Konstanten oder berechneten Werte verwenden können, können sie keine Mitglieder in anderen Enumerationswerten verwenden.

3. Rückwärtszuordnung

Wenn Sie einen Wert vom Aufzählungstyp definieren, können Sie den entsprechenden value über Enum['key'] oder Enum.key abrufen. TypeScript unterstützt auch Reverse Mapping, allerdings unterstützt Reverse Mapping nur numerische Aufzählungen, keine Zeichenfolgenaufzählungen.

Schauen wir uns das folgende Beispiel an:

Aufzählungsstatus {
  Erfolg = 200,
  Nicht gefunden = 404,
  Fehler = 500
}
console.log(Status["Erfolg"]); // 200
console.log(Status[200]); // 'Erfolg'
console.log(Status[Status["Erfolg"]]); // 'Erfolg'

Die in TypeScript definierte Aufzählung ist nach der Kompilierung tatsächlich ein Objekt. Im generierten Code wird der Aufzählungstyp in ein Objekt kompiliert, das die Vorwärtszuordnung (Name -> Wert) und die Rückwärtszuordnung (Wert -> Name) enthält.

Schauen wir uns die Wirkung von Status an, der im obigen Code kompiliert wurde:

{
    200: „Erfolg“,
    404: „Nicht gefunden“,
    500: "Fehler",
    Fehler: 500,
    Nicht gefunden: 404,
    Erfolg: 200
}

Wie Sie sehen, verwendet TypeScript die Feldnamen der definierten Aufzählungswerte als Eigenschaftsnamen und Eigenschaftswerte des Objekts und die Feldwerte der Aufzählungswerte als Eigenschaftswerte und Eigenschaftsnamen des Objekts und fügt sie gleichzeitig dem Objekt hinzu. Auf diese Weise können Sie den Wert über den Feldnamen des Aufzählungswerts oder den Feldnamen über den Wert des Aufzählungswerts abrufen.

4. Heterogene Aufzählung

Heterogene Aufzählungen sind Aufzählungen, deren Mitgliedswerte sowohl numerische als auch Zeichenfolgentypen haben, wie folgt:

enum Ergebnis {
  Fehlgeschlagen = 0,
  Erfolg = "Erfolg"
}

Die Verwendung asynchroner Aufzählungen wird während der Entwicklung nicht empfohlen. Denn wenn eine Klasse von Werten in einem Aufzählungswert organisiert wird, sind ihre Eigenschaften häufig ähnlich. Wenn Sie beispielsweise eine Schnittstellenanforderung stellen, ist der Rückgabestatuscode ein numerischer Wert, und wenn es sich um eine Eingabeaufforderungsnachricht handelt, ist es eine Zeichenfolge. Daher ist es bei der Verwendung von Aufzählungen häufig möglich, die Verwendung heterogener Aufzählungen zu vermeiden, hauptsächlich durch die Organisation der Typen.

5. Konstante Aufzählung

In TypeScript erstellt der in JavaScript kompilierte Code nach der Definition des Enumerationswerts ein entsprechendes Objekt, das bei Ausführung des Programms verwendet werden kann. Aber was ist, wenn Sie Aufzählungen nur verwenden, um Ihr Programm lesbar zu machen, und keine kompilierten Objekte benötigen? Dadurch erhöht sich die Größe des kompilierten Codes. In TypeScript gibt es ein const enum (konstante Aufzählung). Fügen Sie das Schlüsselwort const vor der Anweisung hinzu, die die Aufzählung definiert. Auf diese Weise erstellt der kompilierte Code dieses Objekt nicht, sondern erhält zum Ersetzen nur den entsprechenden Wert aus der Aufzählung:

Aufzählungsstatus {
  Aus,
  An
}
const enum Tier {
  Hund,
  Katze
}
const status = Status.Ein;
const Tier = Tier.Hund;

Der obige Code wird wie folgt in JavaScript kompiliert:

var Status;
(Funktion(Status) {
  Status[(Status["Aus"] = 0)] = "Aus";
  Status[(Status["Ein"] = 1)] = "Ein";
})(Status || (Status = {}));
var status = Status.Ein;
var Tier = 0; // Hund 

Für die Verarbeitung von Status definieren Sie zuerst eine Variable Status, dann eine sofort ausgeführte Funktion und fügen in der Funktion entsprechende Eigenschaften zu Status hinzu. Zuerst setzt Status[“Off”] = 0 die Off-Eigenschaft Status Objekts und setzt den Wert auf 0. Der Rückgabewert dieses Zuweisungsausdrucks ist der Wert auf der rechten Seite des Gleichheitszeichens, also 0, also ist Status[Status [“Off”] = 0] = "Off" gleichbedeutend mit Status[0] = “Off” . Nach dem Erstellen dieses Objekts wird der On-Eigenschaftswert von Status dem Status zugewiesen. Sehen wir uns die Verarbeitung von animal an. Der kompilierte Code erstellt kein Animal-Objekt wie Status, sondern ersetzt den Wert 0 von Animal.Dog direkt durch die Animal.Dog-Position const animal = Animal.Dog .

Durch die Definition einer Aufzählung von Konstanten können Sie eine Sammlung verwandter Konstanten in einer klaren, strukturierten Form verwalten. Da die Definitionen und Inline-Mitgliedswerte nach der Übersetzung gelöscht werden, sind außerdem die Codegröße und die Leistung nicht schlechter als beim direkten Inline-Einfügen von Konstantenwerten.

6. Aufzählungselementtypen und Union-Aufzählungstypen

Wenn alle Mitglieder eines Aufzählungswerts Werte von Literaltypen sind, können jedes Mitglied der Aufzählung und der Aufzählungswert selbst als Typ verwendet werden. Wir nennen solche Aufzählungsmitglieder wörtliche Aufzählungsmitglieder.

Es gibt drei Arten von Aufzählungselementwerten, die die Bedingungen erfüllen:

  • Aufzählungselemente ohne Anfangswerte, zum Beispiel: enum E { A }
  • Der Wert ist ein Zeichenfolgenliteral, zum Beispiel: enum E { A = 'a' }
  • Der Wert ist ein numerischer Literalwert oder ein numerischer Literalwert mit einem - Zeichen, zum Beispiel: enum E { A = 1 }、enum E { A = -1 }

(1) Aufzählungselementtyp

Wenn alle Aufzählungsfälle wörtliche Aufzählungswerte haben, werden die Aufzählungsfälle zu Typen:

Aufzählung Tier {
  Hund = 1,
  Katze = 2
}

Schnittstelle Hund {
  Typ: Tier.Hund; 
}
Schnittstelle Cat {
  Typ: Tier.Katze; 
}

lass Katze: Katze = {
  Typ: Tier.Hund // Fehler [ts] Typ ‚Tier.Hund‘ kann nicht dem Typ ‚Tier.Katze‘ zugewiesen werden
};
lass Hund: Hund = {
  Typ: Tier.Hund
};

Wie Sie sehen, wird in der siebten Codezeile der Typ Animal.Dog verwendet, was angibt, dass die Schnittstelle Dog ein Typfeld vom Typ Animal.Dog haben muss.

(2) Gemeinsamer Aufzählungstyp

Wenn ein Enumerationswert die Bedingungen erfüllt, kann er als ein Union-Typ betrachtet werden, der alle Mitglieder enthält:

Aufzählungsstatus {
  Aus,
  An
}
Schnittstelle Licht {
  Status: Status;
}
Aufzählung Tier {
  Hund = 1,
  Katze = 2
}
const light1: Licht = {
  Status: Tier.Hund // Fehler Typ „Tier.Hund“ kann nicht dem Typ „Status“ zugewiesen werden
};
const light2: Licht = {
  Status: Status.Aus
};
const light3: Licht = {
  Status: Status.Ein
};

Das obige Beispiel definiert den Typ status der Schnittstelle Light als Enumerationswert Status . Dann muss der Attributwert von status einer von Status.Off und Status.On sein, was dem status: Status.Off | Status.On .

7. Aufzählungszusammenführung

Nachdem wir über gängige Aufzählungstypen gesprochen haben, werfen wir einen Blick auf das Konzept der Aufzählungszusammenführung. Für die Werte des Aufzählungstyps können wir sie separat deklarieren:

Aufzählung Tag {
  SONNTAG,
  MONTAG,
  DIENSTAG
 }

Aufzählung Tag {
  MITTWOCH,
  DONNERSTAG,
  FREITAG,
  SAMSTAG
 }

Zu diesem Zeitpunkt führt TypeScript die Aufzählungswerte zusammen. Der nach dem Zusammenführen in JavaScript kompilierte Code lautet wie folgt:

var Tag = void 0;
(Funktion (Tag) {
  Tag[Tag["SONNTAG"] = 0] = "SONNTAG";
  Tag[Tag["MONTAG"] = 1] = "MONTAG";
  Tag[Tag["DIENSTAG"] = 2] = "DIENSTAG";
  Tag[Tag["MITTWOCH"] = 3] = "MITTWOCH";
  Tag[Tag["DONNERSTAG"] = 4] = "DONNERSTAG";
  Tag[Tag["FREITAG"] = 5] = "FREITAG";
  Tag[Tag["SAMSTAG"] = 6] = "SAMSTAG";
})(Tag || (Tag = {}));

Dies ist das Ende dieses Artikels über TypeScript-Aufzählungstypen. Weitere Informationen zu TypeScript -Aufzählungstypen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • TypeScript-Aufzählungstyp
  • Einführung in die grundlegenden TypeScript-Typen
  • So wenden Sie TypeScript-Klassen in Vue-Projekten an
  • Detaillierte Erklärung des Typschutzes in TypeScript
  • Eine kurze Diskussion über den Typschutzmechanismus von TypeScript
  • Klassen in TypeScript

<<:  Lösung für das Problem, dass englische Buchstaben in Firefox nicht umbrochen werden

>>:  Implementierung von 2D- und 3D-Transformationen in CSS3

Artikel empfehlen

Installations- und Konfigurationstutorial von MongoDB unter Linux

MongoDB -Installation Wählen Sie die Installation...

MySQL-Einschränkungen - Super detaillierte Erklärung

Inhaltsverzeichnis MySQL-Einschränkungsoperatione...

Docker-Konfiguration Alibaba Cloud Container Service-Betrieb

Konfigurieren des Alibaba Cloud Docker Container ...

So implementieren Sie das Prototypmuster in JavaScript

Überblick Das Prototypmuster bezieht sich auf den...

Detaillierte Erklärung der nmcli-Verwendung in CentOS8

Allgemeine nmcli-Befehle basierend auf RHEL8/Cent...

Uniapps Erfahrung in der Entwicklung kleiner Programme

1. Erstellen Sie ein neues UI-Projekt Zunächst ei...

Ausführliche Erklärung zu Sitzung und Cookie in Tomcat

Vorwort HTTP ist ein zustandsloses Kommunikations...

JavaScript zum Erreichen eines dynamischen Farbwechsels der Tabelle

In diesem Artikel wird der spezifische Code für J...

Lösung für den Konfigurationsfehler des Nginx-SSL-Zertifikats

1. Einleitung Wenn ein Webprojekt auf unserem Lin...