TypeScript-Problem beim Iterieren über Objekteigenschaften

TypeScript-Problem beim Iterieren über Objekteigenschaften

1. Problem

Beispielsweise der folgende Code:

Typ Tier = {
    Name: Zeichenfolge;
    Alter: Anzahl
}

const Tier:Tier={
    Name:"Hund",
    Alter:12
}

Funktionstest (Objekt: Tier) {
    für (lass k in obj) {
        Konsole.log(Objekt[k]). //Fehler hier}
}
Test (Tier)

Fehler:

2. Lösung

1. Deklarieren Sie das Objekt als beliebiges

Funktionstest (Objekt: Tier) {
    für (lass k in obj) {
        console.log((obj as any)[k]) //Kein Fehler}
}


Diese Methode umgeht direkt den typescript Verifizierungsmechanismus

2. Deklarieren Sie eine Schnittstelle für das Objekt

Typ Tier = {
    Name: Zeichenfolge;
    Alter: Anzahl;
    [Schlüssel: Zeichenfolge]: beliebig
}

const Tier:Tier={
    Name:"Hund",
    Alter:12
}

Funktionstest (Objekt: Tier) {
    für (lass k in obj) {
        console.log(obj [k]) //Kein Fehler}
}
Test (Tier)

Dies kann für allgemeinere Objekttypen verwendet werden, insbesondere für einige Werkzeugmethoden.

3. Verwenden Sie Generika

Funktionstest<T erweitert Objekt>(Objekt:T) {
    für (lass k in obj) {
        console.log(obj [k]) //Kein Fehler}
}

4. Verwenden Sie keyof

Funktionstest (Objekt: Tier) {
    lass k: (Schlüssel des Tiers);
    für (k in obj) {
        console.log(obj [k]) //Kein Fehler}
}

Dies ist das Ende dieses Artikels über TypeScript, das Objekteigenschaften durchläuft. Weitere Informationen über TypeScript, das Objekteigenschaften durchläuft, finden Sie in früheren Artikeln auf 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:
  • Grundlagen und Beispiele zur TypeScript-Aufzählung
  • Ausführliche Lektüre und Übungsaufzeichnungen zu bedingten Typen in TypeScript
  • Typescript+React zum Erzielen einfacher Drag-and-Drop-Effekte auf Mobilgeräten und PCs

<<:  Einige Dinge, die beim Erstellen einer Webseite zu beachten sind

>>:  Das Hintergrundbild der Tabelleneinstellung kann nicht zu 100 % angezeigt werden. Lösung

Artikel empfehlen

Vue implementiert Modal-Komponente basierend auf Teleport

Inhaltsverzeichnis 1. Lernen Sie Teleport kennen ...

Implementierungscode für die HTML-Drag & Drop-Funktion

Basierend auf Vue Die Kernidee dieser Funktion be...

Zusammenfassung von 6 Methoden zur Anzeige von Linux-Protokollen

Als Backend-Programmierer haben Sie an vielen Ste...

HTML- und CSS-Grundlagen (unbedingt lesen)

(1) HTML: HyperText Markup Language, die im Wesen...

Nexus nutzt API für den Betrieb

Nexus bietet RestApi, aber einige APIs müssen noc...

Zusammenfassung von Beispielen gängiger Methoden von JavaScript-Arrays

Inhaltsverzeichnis Gängige Array-Methoden concat(...

Tutorial zur Installation des GreasyFork-JS-Skripts auf dem Mobiltelefon

Inhaltsverzeichnis Vorwort 1. Iceraven-Browser (F...

Detaillierte Erklärung der allgemeinen Verwendung von MySQL-Abfragebedingungen

Dieser Artikel veranschaulicht anhand von Beispie...