Zum Hauptinhalt springen

JSON to TypeScript Generator

Tool zur automatischen Konvertierung von JSON-Daten in TypeScript-Schnittstellen. Verwenden Sie API-Antworten und Konfigurationsdateien mit Typsicherheit.

JSON Input

TypeScript Output

TypeScript interface will appear here...

Hauptmerkmale​

  • Automatisches JSON-Parsing und Schnittstellengenerierung
  • Unterstützung für verschachtelte Objekte
  • Automatische Array-Typ-Erkennung
  • Unterstützung für optionale Eigenschaften
  • Anpassbare Schnittstellennamen
  • 5 Beispielvorlagen

Verwendung​

1. Grundlegende Verwendung​

{
  "name": "John",
  "age": 30
}

↓

interface Root {
  name: string;
  age: number;
}

2. Verschachtelte Objekte​

{
  "user": {
    "profile": {
      "name": "John"
    }
  }
}

↓

interface Root {
  user: User;
}

interface User {
  profile: Profile;
}

interface Profile {
  name: string;
}

3. Arrays​

{
  "users": [
    {"id": 1, "name": "John"}
  ]
}

↓

interface Root {
  users: User[];
}

interface User {
  id: number;
  name: string;
}

Anwendungsfälle​

API-Antworttypen generieren​

// Fügen Sie die von der API erhaltene JSON-Antwort ein
// Generiert sofort eine TypeScript-Schnittstelle
fetch('/api/users')
  .then(res => res.json())
  .then((data: UserResponse) => {
    // Typsicher verwenden
  })

Konfigurationsdateitypen​

// Konvertieren Sie die Struktur von config.json in eine Schnittstelle
interface Config {
  apiUrl: string;
  timeout: number;
  features: Feature[];
}

Tipps​

  1. Optionale Eigenschaften: Aktivieren Sie "Use Optional Properties" wenn einige Felder optional sind
  2. Schnittstellenname: Ändern Sie den Namen je nach Zweck (z.B.: UserResponse, ConfigData)
  3. Komplexes JSON: Beginnen Sie mit einer Beispielvorlage und modifizieren Sie

Verwandte Tools​