So erzwingen Sie den Typ für indizierte Mitglieder von Typescript-Objekten

Die Programmiersprache TypeScript basiert auf JavaScript, das stark typisiert, objektorientiert und kompiliert ist. Die Sprache wird durch Tools wie statische Typisierung, Klassen und Schnittstellen verbessert, die bei der Früherkennung von Fehlern helfen und JavaScript benutzerfreundlicher machen. Eine Funktion von TypeScript ist die Möglichkeit, die Typen indizierter Mitglieder eines Objekts zu erzwingen. Dieser Vorgang wird auch als Indexsignierung bezeichnet.

Eine Indexsignatur ist eine Reihe von Schlüssel-Wert-Paaren, die die vielen Eigenschaften beschreiben, die ein Objekt haben kann. Geben Sie den Typ des Eigenschaftsnamens und den Typ des Eigenschaftswerts mithilfe von Werten bzw. Schlüsseln an. Um die Art der Eigenschaften eines Objekts durchzusetzen, können Benutzer die Indexsignaturfunktion von TypeScript nutzen.

Indexsignaturen können bestimmte Objekteigenschaften effektiv erzwingen, aber auch das Verständnis und die Wartung von Code erschweren. Daher ist es sehr wichtig, Indexsignaturen nur bei Bedarf zu verwenden.

Grammatik

let objectName: {
   [key: string]: string
}

In der obigen Syntax ist „objectName“ der Name unseres Objekts und wir erzwingen, dass der Schlüssel vom Typ „String“ und der Wert vom Typ „String“ ist.

Beispiel 1

In diesem Beispiel haben wir zwei Schnittstellen, Person und Telefonbuch. Die Person-Schnittstelle definiert die Struktur eines Personenobjekts, einschließlich zweier Attribute: Name (Zeichenfolge) und Alter (Zahl). Die PhoneBook-Schnittstelle definiert eine Indexsignatur, wobei der String-Typ als Schlüssel und die Person-Schnittstelle als Wert verwendet werden. Das bedeutet, dass jedes Objekt, das die PhoneBook-Schnittstelle implementiert, nur Eigenschaften haben kann, deren Schlüsseltyp String und deren Werttyp Person ist.

Dann definieren wir eine Variable phoneBook vom Typ PhoneBook und weisen ihr ein leeres Objekt zu. Dann fügen wir einige Einträge zum Telefonbuch hinzu, wobei die Schlüssel Namen und die Werte Personenobjekte sein sollten. Abschließend überprüfen wir anhand des Konsolenprotokolls, dass der Compiler einen Fehler meldet, wenn wir versuchen, einen anderen Variablentyp als den oben genannten einzufügen.

// Person interface
interface Person {
   name: string
   age: number
}

// PhoneBook interface
interface PhoneBook {
   [key: string]: Person
}

let phoneBook: PhoneBook = {}

phoneBook['Person 1'] = { name: 'ABC', age: 30 }
phoneBook['Person 2'] = { name: 'XYZ', age: 25 }
phoneBook['Person 3'] = { name: 'MNO', age: 10 }

console.log(phoneBook)

Beim Kompilieren wird der folgende JavaScript-Code generiert: −

var phoneBook = {};
phoneBook['Person 1'] = { name: 'ABC', age: 30 };
phoneBook['Person 2'] = { name: 'XYZ', age: 25 };
phoneBook['Person 3'] = { name: 'MNO', age: 10 };
console.log(phoneBook);

Ausgabe

Der obige Code erzeugt die folgende Ausgabe:

{ 'Person 1': { name: 'ABC', age: 30 },
  'Person 2': { name: 'XYZ', age: 25 },
  'Person 3': { name: 'MNO', age: 10 } }

Beispiel 2

In diesem Beispiel haben wir eine Schnittstelle Produkt, die die Struktur eines Produktobjekts mit zwei Eigenschaften definiert: Name (Zeichenfolge) und Preis (Zahl). Dann haben wir eine weitere Schnittstelle „ShoppingCart“, die eine Indexsignatur darstellt und dabei einen numerischen Typ als Schlüssel und die Schnittstelle „Produkt“ als Wert verwendet. Jedes Objekt, das die ShoppingCart-Schnittstelle implementiert, kann nur Eigenschaften mit dem Schlüsseltyp „Number“ und dem Werttyp „Product“ haben.

Dann definieren wir einen variablen Warenkorb vom Typ ShoppingCart und weisen ihm ein leeres Objekt zu. Dann fügen wir dem Warenkorb einige Einträge hinzu, wobei der Schlüssel die Produkt-ID und der Wert das Produktobjekt sein sollte. Wir können sehen, dass die Artikel korrekt zum Warenkorb hinzugefügt wurden. Wenn der Wert nicht vom Typ „Produkt“ ist oder dem Produktobjekt eine der in der Produktschnittstelle definierten Eigenschaften fehlt, tritt ein Fehler auf.

interface Product {
   name: string
   price: number
}

// ShoppingCart interface
interface ShoppingCart {
   [key: number]: Product
}

let cart: ShoppingCart = {}

cart[1] = { name: 'Shirt', price: 20 }
cart[2] = { name: 'Pants', price: 30 }
cart[3] = { name: 'Shoes', price: 40 }

console.log(cart[1])
console.log(cart[2])
console.log(cart[3])

Beim Kompilieren wird der folgende JavaScript-Code generiert: −

var cart = {};
cart[1] = { name: 'Shirt', price: 20 };
cart[2] = { name: 'Pants', price: 30 };
cart[3] = { name: 'Shoes', price: 40 };
console.log(cart[1]);
console.log(cart[2]);
console.log(cart[3]);

Ausgabe

Der obige Code erzeugt die folgende Ausgabe -

{ name: 'Shirt', price: 20 }
{ name: 'Pants', price: 30 }
{ name: 'Shoes', price: 40 }

Diese Beispiele veranschaulichen, wie Indexsignaturen verwendet werden, um die Eigenschaftstypen eines Objekts zu erzwingen. Indexsignaturen sind eine leistungsstarke Funktion, die Ihnen dabei helfen kann, robusteren und wartbareren Code zu schreiben. Es ist jedoch wichtig, sie mit Bedacht und nur bei Bedarf einzusetzen.

Das obige ist der detaillierte Inhalt vonSo erzwingen Sie den Typ für indizierte Mitglieder von Typescript-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!