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    

Artikel empfehlen

Detaillierte Erklärung zum CSS-Randkollaps

Vorherige Das ist eine klassische alte Frage. Da ...

Einführung in das Enctype-Attribut des Form-Tags und seine Anwendungsbeispiele

Enctype: Gibt den Kodierungstyp an, der vom Browse...

js realisiert den Lupeneffekt von Produkten auf Einkaufswebsites

In diesem Artikel wird der spezifische Code von j...

Detaillierte Erklärung generischer Fälle in TypeScript

Definition von Generika // Anforderung 1: Generik...

Ausführliche Erläuterung der MySQL-Isolationsebene und des Sperrmechanismus

Inhaltsverzeichnis Kurzbeschreibung: 1. Vier Merk...

Vue implementiert Mehrfachauswahl im unteren Popup-Fenster

In diesem Artikelbeispiel wird der spezifische Co...

Warum wird mir die Zugriffsschnittstelle für Docker Tomcat nicht angezeigt?

Frage: Kann der Ursprungsserver keine Darstellung...

Lösung zur Definition der Mindestspannweite hat keine Auswirkung

Das Span-Tag wird häufig beim Erstellen von HTML-W...

Ein einfaches Beispiel zur Implementierung einer Fuzzy-Abfrage in Vue

Vorwort Die sogenannte Fuzzy-Abfrage dient dazu, ...

Kleines Programm zur Implementierung eines einfachen Taschenrechners

In diesem Artikelbeispiel wird der spezifische Co...

Embed-Codes für mehrere ältere Player

Die Player, die wir auf Webseiten sehen, sind nic...

Einführung in das Fokuselement document.activeELEment in JavaScript

Inhaltsverzeichnis 1. Der Fokus liegt standardmäß...

Lösung für das Problem mit verstümmeltem MySQL-Code unter Linux

Das Projekt interagiert mit dem Server, greift üb...