Zum Hauptinhalt springen
Bethemesh
Entwicklung

JSON in TypeScript, Zod und JSON Schema

Leite TypeScript-Interfaces, Typen, Zod-Schemas oder JSON Schema aus Objekten und Arrays eines JSON-Beispiels lokal im Browser ab.

  • Zwischenablage
  • Export

Dieses Widget einbetten

Passe die Darstellung an, prüfe die Vorschau und kopiere anschließend den Code.

Vorschau

Art des Einbettungscodes

Zu kopierender Code

Responsive und automatisch von Bethemesh in der Größe angepasst.

War dieses Werkzeug hilfreich?

Wie funktioniert dieses Tool?

Erzeuge aus Beispiel-JSON TypeScript-Interfaces, Typaliase, Zod-Schemas oder JSON Schema. Der Generator untersucht verschachtelte Objekte und alle Arrayeinträge, nicht nur das erste Element. Das Ergebnis ist ein Ausgangspunkt für deinen API-Vertrag: Ein Beispiel zeigt nicht alle Werte, die ein Dienst liefern kann. Die Ableitung läuft auf deinem Gerät; generierter Code wird im Formular nicht ausgeführt.

Die Engine erkennt Zeichenketten, Zahlen, boolesche Werte, Objekte, Arrays und null. Unterschiedliche beobachtete Typen können eine Union bilden. TypeScript-Zahlen werden zu number; datums- oder E-Mail-ähnliche Zeichenketten bleiben string, ohne vermutete Fachregeln. Ein leeres Array verrät nichts über spätere Elemente und erhält einen unbekannten Elementtyp.

In einem Array werden Objekteigenschaften zusammengeführt. Fehlt ein Feld bei einigen Einträgen, kann es optional werden. Der Modus für ausschließlich erforderliche Felder erzeugt einen strengeren Vertrag, dem manche Beispiele dann nicht entsprechen würden. Ein vorhandener null-Wert ist kein fehlendes Feld: Nullzulässigkeit und Optionalität bleiben getrennt.

Wähle interface oder type für TypeScript-Deklarationen, Zod für einzubindenden Validierungscode oder JSON Schema für ein Schemadokument. readonly betrifft TypeScript und friert Objekte nicht zur Laufzeit ein. Zod-Ausgabe importiert zod, das dein Projekt bereitstellen muss. Kindschemas werden vor den Verweisen der Eltern deklariert.

Die Ziele teilen die Ableitung, versprechen aber nicht überall gleiches Verhalten. TypeScript prüft Entwicklungscode, nicht automatisch Netzwerkantworten. Zod benötigt einen tatsächlichen Validierungsaufruf. JSON Schema schließt generierte Objekte mit additionalProperties: false; zusätzliche Schlüssel verlangen daher eine bewusste Entscheidung.

Prüfe zusätzlich, ob fehlende Eigenschaften wirklich optional sein sollen oder nur im gewählten Beispieldokument fehlen. Die Typdefinition ersetzt keine Beschreibung des vollständigen API-Vertrags.

So verwenden Sie dieses Tool

  1. Repräsentatives Beispiel eingeben

    Importiere gültiges JSON oder füge es ein. Vermeide unnötige personenbezogene Daten; wichtig sind Struktur und verschiedene beobachtete Typen.

  2. Wurzelname und Ziel wählen

    Benenne das Modell und wähle die Ausgabe. Passe fehlende Eigenschaften und readonly für unterstützte TypeScript-Ziele an.

  3. Code prüfen und übernehmen

    Kontrolliere Unions, optionale Felder und Abhängigkeiten vor Kopie oder Export. Änderungen an Eingaben oder Optionen blenden alte Ergebnisse aus. Prüfe den Code danach im Projekt.

Anwendungsfälle

API-Antwortmodelle entwerfen

Verwende repräsentative Objekte mit Verschachtelung, Varianten und null-Werten. Prüfe anschließend Namen und die tatsächlich garantierten Felder.

Zod-Validierung vorbereiten

Erzeuge Grundschemas und ergänze Formate, Grenzen und Anwendungsregeln. Eine einfache Zeichenkette wird nicht automatisch als gültige URL behandelt.

Mehrere Beispiele einem Vertrag gegenüberstellen

Fasse vergleichbare Objekte in einem Array zusammen, um nur teilweise vorhandene Felder sichtbar zu machen. Nimm bekannte seltene Fälle auf.

Beispiele

Zwei Interfaces für verschachtelte Daten erzeugen

Mit Wurzelname Response und Ziel interface wird user zum separaten Modell User. id erhält number und name string; konkrete Beispielwerte werden nicht festgeschrieben.

Eingabe

{"user":{"id":1,"name":"Ada"}}

Ergebnis

interface Response {
  user: User;
}

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

Zod-Abhängigkeiten vor ihrer Nutzung deklarieren

Mit Wurzelname Root und Zod-Ausgabe steht ChildSchema vor RootSchema. Eine Konstante wird dadurch nicht vor ihrer Initialisierung verwendet.

Eingabe

{"child":{"id":1}}

Ergebnis

import { z } from 'zod';

export const ChildSchema = z.object({
  id: z.number(),
});
export type Child = z.infer<typeof ChildSchema>;

export const RootSchema = z.object({
  child: ChildSchema,
});
export type Root = z.infer<typeof RootSchema>;

Tipps und bewährte Vorgehensweisen

  • Füge Beispiele mit ausgelassenen Feldern und null hinzu. Eine vollständig gefüllte Antwort verbirgt häufig optionale Eigenschaften.
  • Ein Beispiel beweist keine vollständige Werteliste oder Zahlenobergrenze. Ergänze solche Regeln anhand der Dienstdokumentation.
  • Verwechsle readonly nicht mit Laufzeitschutz. Hier handelt es sich um eine TypeScript-Prüfung.
  • Erhalte große Kennungen als Zeichenketten, wenn die API sie so überträgt. JSON nutzt beim Lesen die Zahlentypen des Browsers.

Quellen und Referenzen

Häufig gestellte Fragen

Validiert ein generiertes Interface meine API-Antworten?

Nein. TypeScript beschreibt erwartete Werte bei der Entwicklung. Für empfangene Daten brauchst du einen Laufzeitvalidator und musst dessen Ergebnis vor der Verwendung tatsächlich auswerten.

Wie werden optionale Eigenschaften erkannt?

Die Engine vergleicht Objekte desselben Arrays und erkennt teilweise fehlende Schlüssel. Ein einziges Objekt mit einem vorhandenen Feld verrät nicht, dass es sonst fehlen könnte.

Warum wird ein Datum oder eine E-Mail nur zu string?

Das Beispiel zeigt eine Zeichenkette und beweist keine Fachregel. Der Generator vermeidet willkürliche Validierung nach dem Aussehen. Ergänze gewünschte Formate und Bedingungen ausdrücklich.

Was unterscheidet das Werkzeug vom eigenständigen JSON-Schema-Generator?

Hier wählst du mehrere Ziele sowie Namen und optionale Eigenschaften. Das eigenständige Werkzeug erzeugt direkt ein Schema und unterscheidet beobachtete Ganzzahlen. Beide nutzen dieselbe gemeinsame Ableitung.

Verwandte Werkzeuge

Mit diesen Werkzeugen weitermachen

Werkzeuge, die diesem ähnlich sind oder es ergänzen.

Ähnliche Werkzeuge

JSON Schema erzeugen

Erzeuge lokal im Browser ein JSON Schema aus einem JSON-Beispiel.

EntwicklungDieses Werkzeug verwenden

JSON-Schema validieren

Prüft JSON-Dokumente gegen ein JSON Schema und zeigt Fehler mit Pfad und Regel präzise an.

EntwicklungEmpfohlenDieses Werkzeug verwenden

Testdaten-Generator

Realistische Testdaten für Entwicklung und Tests erzeugen.

EntwicklungDieses Werkzeug verwenden