JSON zu TypeScript

JSON-Daten automatisch in TypeScript Interfaces oder Typ-Definitionen konvertieren

JSON Eingabe
Zeilen: 1 | Zeichen: 0
TypeScript Ausgabe
// Nach JSON-Eingabe werden TypeScript-Typ-Definitionen automatisch generiert
Typen: 0 | Zeilen: 1

Was ist JSON zu TypeScript?

JSON zu TypeScript ist ein Werkzeug, das JSON-Daten automatisch in TypeScript-Typ-Definitionen konvertiert. Es analysiert die JSON-Struktur und generiert entsprechende Interface- oder Type-Deklarationen, die Typsicherheit und Code-Vervollständigung in TypeScript-Projekten bieten.

Verwendung

  1. JSON-Daten in das linke Eingabefeld einfügen oder Beispiel-Button zum Laden
  2. Optionale Einstellungen: Root-Typ-Name, Interface/Type-Stil wählen, Export hinzufügen etc.
  3. Rechts werden automatisch entsprechende TypeScript-Typ-Definitionen generiert
  4. "Kopieren"-Button klicken, um generierte Typ-Definitionen in die Zwischenablage zu kopieren
  5. Typ-Definitionen in TypeScript-Projekt einfügen und verwenden

Anwendungsbeispiele

Einfaches Objekt-Konvertierung

输入 JSON:
{
  "name": "张三",
  "age": 28,
  "isActive": true
}

输出 TypeScript:
export interface Root {
  name: string;
  age: number;
  isActive: boolean;
}

Verschachteltes Objekt-Konvertierung

输入 JSON:
{
  "user": {
    "id": 1,
    "profile": {
      "avatar": "url",
      "bio": "简介"
    }
  }
}

输出 TypeScript:
export interface UserProfile {
  avatar: string;
  bio: string;
}

export interface User {
  id: number;
  profile: UserProfile;
}

export interface Root {
  user: User;
}

Häufig gestellte Fragen (FAQ)

F: Wie werden generierte Typen verwendet?

A: Generierte Typ-Definitionen in eine .ts-Datei kopieren und im Code verwenden. Beispiel: const data: Root = JSON.parse(response)

F: Was ist der Unterschied zwischen Interface und Type?

A: Interface kann erweitert und implementiert werden, geeignet für Objekt-Typ-Definitionen; Type ist flexibler und kann Union-Typen, Schnitt-Typen etc. definieren. Für einfache Objekt-Strukturen sind beide funktional ähnlich.

F: Wie werden JSON-Arrays verarbeitet?

A: Das Werkzeug identifiziert automatisch den Array-Element-Typ. Bei Objekt-Arrays wird eine separate Typ-Definition für das Array-Element generiert, das Array wird als ItemType[] dargestellt.

F: Können generierte Typen bearbeitet werden?

A: Nach Generierung können sie frei bearbeitet werden. Es wird empfohlen, Typ-Namen nach Bedarf anzupassen, Optional-Felder-Markierungen (?) hinzuzufügen oder Typ-Definitionen einiger Felder zu ändern.