Eine kurze Diskussion zum Verständnis von TypeScript-Indexsignaturen

Wir verwenden zwei Objekte, um die Gehälter von zwei Programmierern zu beschreiben:

const Gehalt1 = {
  Basisgehalt: 100_000,
  Jahresbonus: 20_000
};
 
const Gehalt2 = {
  VertragGehalt: 110_000
};

Schreiben Sie dann eine Funktion, um das Gesamtgehalt zu erhalten

Funktion Gesamtgehalt(Gehaltsobjekt: ???) {
  sei total = 0;
  für (const name in salaryObject) {
    Gesamtsumme += Gehaltsobjekt[Name];
  }
  Gesamtrendite;
}
Gesamtgehalt(Gehalt1); // => 120_000
Gesamtgehalt (Gehalt2); // => 110_000

Wie würden Sie an Ihrer Stelle den Parameter salaryObject totalSalary() deklarieren, damit er ein Objekt mit Zeichenfolgenschlüsseln und numerischen Werten akzeptiert?

Die Antwort ist, eine Indexsignatur zu verwenden!

Sehen wir uns als Nächstes an, was TypeScript Indexsignaturen sind und wann sie benötigt werden.

1. Was ist eine Indexsignatur?

Die Idee von Indexsignaturen besteht darin, Objekte zu typisieren, deren Struktur unbekannt ist, wenn nur der Schlüssel und die Wertetypen bekannt sind.

Im Fall salary Gehaltsparameters passt es perfekt, da die Funktion salary unterschiedlicher Struktur akzeptieren sollte, wobei die einzige Voraussetzung darin besteht, dass die Attributwerte Zahlen sind.

Wir deklarieren salaryObject mit einer Indexsignatur

Funktion Gesamtgehalt (Gehaltsobjekt: { [Schlüssel: Zeichenfolge]: Zahl }) {
  sei total = 0;
  für (const name in salaryObject) {
    Gesamtsumme += Gehaltsobjekt[Name];
  }
  Gesamtrendite;
}
 
Gesamtgehalt(Gehalt1); // => 120_000
Gesamtgehalt (Gehalt2); // => 110_000

{[key: string]: number} ist die Indexsignatur, die TypeScript salaryObject ein Objekt mit string als Schlüssel und number als Wert sein muss.

2. Indexsignatursyntax

Die Syntax für Indexsignaturen ist ziemlich einfach und ähnelt der Syntax für Eigenschaften, es gibt jedoch einen Unterschied. Wir schreiben einfach den Schlüsseltyp in eckige Klammern anstelle des Eigenschaftsnamens: { [ key: KeyType]: ValueType }.

Nachfolgend finden Sie einige Beispiele für Indexsignaturen.

string Zeichenfolgentyp ist der Schlüssel und der Wert.

Schnittstelle StringByString {
  [Schlüssel: Zeichenfolge]: Zeichenfolge;
}
 
const heroesInBooks: StringByString = {
  'Gunslinger': 'Weisheit aus der Front',
  „Jack Torrance“: „Wang Dazhi“
};

Der string ist der Schlüssel und der Wert kann string , number oder boolean sein.

Schnittstellenoptionen {
  [Schlüssel: Zeichenfolge]: Zeichenfolge | Zahl | Boolesch;
  Zeitüberschreitung: Zahl;
}
 
const options: Optionen = {
  Zeitüberschreitung: 1000,
  timeoutMessage: 'Die Anforderung ist abgelaufen!',
  isFileUpload: false
};

Der Signaturschlüssel kann nur eine string , number oder symbol sein. Andere Typen sind nicht zulässig.

3. Hinweise zu Indexsignaturen

Es gibt einige Einschränkungen bei Indexsignaturen in TypeScript , die Sie kennen müssen.

3.1 Nicht vorhandene Eigenschaften

Was passiert, wenn Sie versuchen, auf eine nicht vorhandene Eigenschaft eines Objekts mit der Indexsignatur { [key: string]: string } zuzugreifen?

Wie erwartet folgert TypeScript , dass der Typ des Wertes „ string ist. Beim Überprüfen des Laufzeitwerts stellt sich jedoch heraus, dass dieser undefined ist:

Laut TypeScript ist die value vom Typ string , aber ihr Laufzeitwert ist undefined .

Eine Indexsignatur ordnet lediglich einen Schlüsseltyp einem Werttyp zu, mehr nicht. Wenn diese Zuordnung nicht korrekt erfolgt, kann der Werttyp vom tatsächlichen Laufzeitdatentyp abweichen.

Um die Eingabe genauer zu machen, wird der Indexwert als string oder undefined markiert. Auf diese Weise erkennt TypeScript , dass die Eigenschaft, auf die Sie zugreifen, möglicherweise nicht existiert.

3.2 Zeichenfolgen- und Zifferntasten

Angenommen, es gibt ein Wörterbuch mit Zahlennamen:

Schnittstelle NumbersNames {
  [Schlüssel: Zeichenfolge]: Zeichenfolge
}
 
Konstantennamen: NumbersNames = {
  '1': 'eins',
  '2': 'zwei',
  '3': 'drei',
  // ...
};

Nein, es funktioniert normal.

JavaScript wandelt Zahlen implizit in Zeichenfolgen um, wenn sie als Schlüssel in Eigenschaftszugriffsmethoden verwendet werden ( names[1] ist dasselbe wie names['1' ]). TypeScript erzwingt dies auch.

Sie können sich [key: string ] als dasselbe wie [key: string | number] vorstellen.

4. Indexsignatur vs. Record<Keys, Type>

TypeScript verfügt über einen Hilfstyp Record<Keys, Type>， Indexsignaturen ähnelt.

const Objekt1: Datensatz<Zeichenfolge, Zeichenfolge> = { prop: 'Wert' }; // OK
const object2: { [Schlüssel: Zeichenfolge]: Zeichenfolge } = { prop: 'Wert' }; // OK

Die Frage ist also: Wann verwenden Sie Record<Keys, Type>， wann verwenden Sie Indexsignaturen? Auf den ersten Blick sehen sie ähnlich aus

Wie wir wissen, akzeptieren Indexsignaturen nur string , number oder symbol als Schlüsseltypen. Es ist ein Fehler, wenn Sie beispielsweise versuchen, eine Vereinigung vom Typ String-Literal als Schlüssel in einer Indexsignatur zu verwenden.

Indexsignaturen sind in Bezug auf die Schlüssel generisch.

Wir können jedoch eine Vereinigung von Zeichenfolgenliteralen verwenden, um die Schlüssel in Record<keys, Type> zu beschreiben.

Typ Gehalt = Datensatz<'Jahresgehalt'|'Jahresbonus', Zahl>
 
const Gehalt1: Gehalt = { 
  'Jahresgehalt': 120_000,
  'Jahresbonus': 10_000
}; // OK

Record<Keys, Type> ist für schlüsselspezifische Probleme.

Es wird empfohlen, generische Objekte mit Indexsignaturen zu kommentieren, beispielsweise ist der Schlüssel vom Typ Zeichenfolge. Wenn Sie die Schlüssel jedoch im Voraus kennen, verwenden Sie Record<Keys, Type> , um bestimmte Objekte zu kommentieren, z. B. die Verwendung von Zeichenfolgenliteralen „ prop1' | 'prop2' für die Schlüssel.

Zusammenfassen:

Wenn Sie die Objektstruktur, mit der Sie arbeiten, nicht kennen, aber die möglichen Schlüssel- und Wertetypen kennen, benötigen Sie Indexsignaturen.

Eine Indexsignatur besteht aus dem Indexnamen und seinem Typ in eckigen Klammern, gefolgt von einem Doppelpunkt und dem Werttyp: { [indexName: KeyType]: ValueType }， KeyType ein string , number oder symbol und ValueType ein beliebiger Typ sein kann.

Damit ist dieser Artikel zum Verständnis von TypeScript-Indexsignaturen abgeschlossen. Weitere verwandte Inhalte zu TypeScript-Indexsignaturen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!