nicetool.dev logo

JSON zu TypeScript

Füge eine API-Antwort oder ein JSON-Objekt ein. Die Typen aktualisieren sich beim Tippen.

JSON
Erzeugter Code
export interface User {
  id: number;
  name: string;
  email: string;
  score: number;
  active: boolean;
  tags: string[];
  address: Address;
  orders: Order[];
}

export interface Address {
  city: string;
  postcode: null;
}

export interface Order {
  id: number;
  total: number;
  paidAt?: string;
  coupon?: string;
}

Warum Typen aus JSON erzeugen?

APIs, Konfigurationsdateien und Webhooks liefern JSON, aber TypeScript, Go und Laufzeit-Validatoren brauchen eine explizite Struktur. Interfaces für eine große Antwort von Hand zu schreiben, ist langsam und fehleranfällig: ein Feld, das manchmal fehlt, eine Zahl, die manchmal null ist, oder ein verschachteltes Array von Objekten sind schnell falsch beschrieben. Dieses Tool liest ein echtes Beispiel und leitet die Struktur ab. Arrays von Objekten werden zusammengeführt, Schlüssel, die nur in manchen Einträgen vorkommen, werden optional, Schlüssel, die manchmal null sind, nullable, und jedes verschachtelte Objekt bekommt einen eigenen Typnamen.

Funktionen

  • • TypeScript-Interfaces oder Typ-Aliase mit optionalen (?) Feldern
  • • Go-Structs mit json-Tags, omitempty und idiomatischen Namen (ID, URL)
  • • Zod-Schemas mit abgeleiteten TypeScript-Typen, so sortiert, dass Referenzen auflösen
  • • Führt Arrays von Objekten zusammen und erkennt null, gemischte Werte und Ganzzahlen
  • • Setzt ungültige Bezeichner wie "first-name" in Anführungszeichen

Deine Daten bleiben privat

Parsen und Codeerzeugung laufen im Browser. API-Antworten mit echten Kundendaten verlassen deinen Rechner nicht.

Kein Upload, funktioniert offline.

So verwenden Sie: JSON zu TypeScript

  1. 1

    Füge ein JSON-Beispiel ein, etwa eine aus dem Network-Tab, Postman oder curl kopierte Antwort. Je mehr Array-Einträge es enthält, desto besser werden optionale Felder erkannt.

  2. 2

    Wähle die Ausgabe: TypeScript-Interfaces, Go-Structs oder Zod-Schemas. Bei TypeScript kannst du auf Typ-Aliase umschalten.

  3. 3

    Lege den Namen des Wurzeltyps fest, etwa User oder OrderResponse. Verschachtelte Objekte werden nach ihren Schlüsseln benannt, Array-Einträge im Singular (orders wird Order).

  4. 4

    Prüfe das Ergebnis, passe an, was das Beispiel nicht zeigen kann (etwa ein String, der eigentlich ein Datum oder Enum ist), und kopiere es in deinen Code.

Praxisbeispiele

REST-API-Antwort typisieren

Füge das JSON von GET /api/users/42 ein und erhalte ein User-Interface mit verschachteltem Address-Typ, direkt nutzbar mit fetch oder axios.

Go-Client für eine fremde API

Erzeuge Structs mit json-Tags für eine Stripe- oder GitHub-Webhook-Payload. Optionale Schlüssel bekommen omitempty, verschachtelte Objekte eigene Typen.

Laufzeitvalidierung mit Zod

Mach aus einem Beispiel-Request-Body ein Zod-Schema und nutze schema.parse() in einem Next.js-Route-Handler gegen fehlerhafte Eingaben, mit z.infer für den statischen Typ.

Konfigurationsdateien

Füge eine JSON-Konfiguration ein, um ein typisiertes Interface zu erhalten, damit Editoren Schlüssel vervollständigen und Tippfehler finden.

Häufige Fragen

Wie werden optionale Felder erkannt?+

Ist die Wurzel oder ein verschachtelter Wert ein Array von Objekten, werden alle Einträge zusammengeführt. Ein Schlüssel, der in mindestens einem Eintrag fehlt, wird optional (? in TypeScript, omitempty in Go, .optional() in Zod).

Was passiert mit null-Werten?+

Ein Schlüssel, der mal null und mal ein String ist, wird string | null (nullable() in Zod, *string in Go). Ist er im Beispiel immer null, bleibt er null, weil sein echter Typ unbekannt ist.

Warum wird eine Zahl in Go zu int64?+

Ganze Zahlen im Beispiel werden int64, Dezimalzahlen float64. Mischt ein Feld beides, wird es zu float64 erweitert (number in TypeScript).

Erkennt es Datum, Enums oder UUIDs?+

Nein. JSON kennt keine Datums- oder Enum-Typen, sie erscheinen als string. Verfeinere sie von Hand, etwa mit z.string().datetime() oder einer Union aus Literalwerten.