So begrenzen Sie den Wertebereich von Objektschlüsseln in TypeScript

Wenn wir TypeScript verwenden, möchten wir das von ihm bereitgestellte Typsystem nutzen, um alle Aspekte des Codes einzuschränken, und die Schlüsselwerte von Objekten sind keine Ausnahme.

Beispielsweise haben wir ein Objekt, das die Namen der Personen in jeder Klasse speichert, und der Typ könnte folgendermaßen aussehen:

Typ Studenten = Datensatz<Zeichenfolge, Zeichenfolge[]>;

Die Daten sehen natürlich so aus:

const Studenten: Studenten = {
  Erstsemester: ["David", "John"],
  Student im zweiten Studienjahr: [],
  Junior: ["Lilie"],
  Senior: ["Tom"],
};

Beschränken Sie Objektschlüssel auf Aufzählungen

Das Problem bei obigem Datentyp ist, dass es für die Note nur eine begrenzte Anzahl an möglichen Werten gibt, dem Objekt aber beliebig Attribute hinzugefügt werden können, was die Daten unrein erscheinen lässt.

Daher fügen wir eine neue Aufzählung hinzu, um die möglichen Werte aufzulisten:

export enum Klasse {
  Erstsemester,
  Student im zweiten Studienjahr,
  Junior,
  Senior,
}

Beschränken Sie nun einfach die Schlüssel des Objekts auf die obige Aufzählung.

- Typ „Studenten“ = Datensatz<Zeichenfolge, Zeichenfolge[]>;
+ Typ Studenten = Datensatz<Note, Zeichenfolge[]>;

Unsere Daten können wie folgt geschrieben werden:

const Studenten: Studenten = {
  [Klasse.Neuling]: ["David", "John"],
  [Klasse 2. Studienjahr]: [],
  [Klasse Junior]: ["Lily"],
  [Klasse.Senior]: ["Tom"],
  // ❌ Objektliterale dürfen nur bekannte Eigenschaften angeben, und „blah“ existiert im Typ „Students“ nicht.ts(2322)
  bla: ["jemand"],
};

Auf diese Weise wird der Bereich der Schlüsselnamen auf dem Objekt eingeschränkt. Sie können sehen, dass ein Fehler gemeldet wird, wenn ein Schlüssel außerhalb der Aufzählung hinzugefügt wird.

Weitere semantische Enumerationswerte

Allerdings ist die obige Vorgehensweise immer noch ungeeignet, da der Aufzählungswert standardmäßig eine Zahl ist, die bei 0 beginnt, sodass er als Schlüsselwert keine ausreichende Semantik besitzt, was sich beim Zugriff auf die Eigenschaften des Objekts widerspiegelt:

Korrigieren wir unsere Aufzählung so, dass sie mehr semantischen Text als Wert verwendet:

export enum Klasse {
  Freshman = "Neuling",
  sophomore = "Student im zweiten Studienjahr",
  Junior = "Junior",
  Senior = "Senior",
}

Wenn Sie die Aufzählung jetzt erneut verwenden, sind die erhaltenen Zahlen nicht mehr bedeutungslos.

Wenn Sie möchten, kann der Aufzählungswert auch chinesisch sein,

export enum Klasse {
  Freshman = "Neuling",
  sophomore = "Student im zweiten Studienjahr",
  Junior = „Junior-Mädchen“,
  Senior = „Erfahrener Fahrer“,
}

Es gibt kein Problem bei der Verwendung von:

Schlüsselwert optional

Es gibt noch ein weiteres Problem mit der obigen Typdefinition. Sie erfordert, dass das Objekt bei Verwendung alle Werte in der Aufzählung enthält. Beispielsweise gibt es niemanden in der Klasse „Student im sophomore , sodass Sie es nicht schreiben können, es wird jedoch einen Fehler melden.

// ❌ Eigenschaft ‚sophomore‘ fehlt im Typ ‚{ Freshman: string[]; Junior: string[]; Senior: string[]; }‘, ist aber im Typ ‚Students‘ erforderlich.ts(2741)
const Studenten: Studenten = {
  [Klasse.Neuling]: ["David", "John"],
  // [Klasse.zweites Studienjahr]: [],
  [Klasse Junior]: ["Lily"],
  [Klasse.Senior]: ["Tom"],
};

Daher ist die Art der Optimierung optional:

Typ Studenten = Teilweise<Datensatz<Note, Zeichenfolge[]>>;

Wenn die optionalen Werte nicht durch eine Aufzählung definiert sind, sondern aus einem Array stammen,

const grades = ["Student im ersten Jahr", "Student im zweiten Jahr", "Student im dritten Jahr", "Student im vierten Jahr"];

Das bedeutet, dass wir die Werte im Array in einen Union-Typ extrahieren müssen.

Verwenden Sie zunächst const-Assertionen, um das Array in einen Tupeltyp zu konvertieren.

const grades = <const>["Student im ersten Jahr", "Student im zweiten Jahr", "Student im dritten Jahr", "Student im vierten Jahr"];

Verwenden Sie dann typeof und Lookup Types, um den endgültigen Union-Typ zu erhalten:

// Tatsächlich geben Sie Keys = "Freshman" | "sophomore" | "Junior" | "Senior" ein.
Typschlüssel = Art der Noten [Anzahl];

Schließlich können der Datentyp und die Daten wie folgt geschrieben werden:

Typ Studenten = Teilweise<Datensatz<Schlüssel, Zeichenfolge[]>>;

const Studenten: Studenten = {
  Erstsemester: ["David", "John"],
  Junior: ["Lilie"],
  Senior: ["Tom"],
};

Beachten Sie, dass in dieser Form der Objektschlüssel keine syntaktische Verbindung zu den Elementen im ursprünglichen Array hat, d. h. die „Sprungdefinition“ des Editors ist nicht verfügbar.

Versuchen Sie, den Code verbunden zu halten, um die Rolle von TypeScript anzuzeigen. Daher werden Vorgänge wie diese, die nur Typbeschränkungen haben, aber keine Verbindungen herstellen können, nicht empfohlen.

Verwandte Ressourcen

Konstantenaussagen

keyof und Lookup-Typen

Der Text wurde erfolgreich aktualisiert, es sind jedoch folgende Fehler aufgetreten:

Oben sind die Details zur Begrenzung des Wertebereichs von Objektschlüsselnamen in TypeScript aufgeführt. Weitere Informationen zur Begrenzung des Wertebereichs von Objektschlüsselnamen in TypeScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!