JSON zu TypeScript-Interface + Zod-Schema: Konverter | We.Inc
Füge JSON ein und erhalte TypeScript-Interfaces und ein Zod-Schema auf einmal. Arrays werden zusammengeführt, sodass fehlende Felder optional werden. Nichts verlässt deinen Browser.
Füge ein beliebiges JSON-Beispiel ein, und dieser Konverter schreibt TypeScript-Interfaces für Prüfungen zur Compile-Zeit und ein Zod-Schema für Prüfungen der Daten zur Laufzeit. Verschachtelte Objekte bekommen eigene benannte Typen, Arrays aus Objekten werden zusammengeführt, sodass Felder, die in manchen Einträgen fehlen, optional werden, und die Umwandlung läuft lokal, private Daten bleiben also auf deinem Rechner.
Wie JSON-Werte auf Typen abgebildet werden
JSON-Wert
TypeScript
Zod
"text"
z.string()
42 oder 4.2
z.number()
z.boolean()
z.null()
number[]
z.array(z.number())
Interface mit a: number
z.object({ a: z.number() })
Schlüssel fehlt in manchen Array-Einträgen
key?: type
.optional()
Typen sind nur so gut wie das Beispiel. Füge also eine Antwort ein, die jedes erwartete Feld zeigt, am besten mit mehreren Array-Einträgen. Benenne den Root-Typ um, wechsle zwischen Interface und Type-Alias und kopiere eine der beiden Ausgaben.
Typen oder ein Schema: Was brauchst du?
TypeScript-Typen verschwinden, wenn dein Code kompiliert wird. Sie helfen deinem Editor und finden Fehler in deinem eigenen Code, aber sie können dir nicht sagen, dass eine API einen String geschickt hat, wo du eine Zahl erwartet hast.
Ein Zod-Schema ist echter Code, der läuft. Ein Aufruf von parse auf eingehenden Daten wirft einen Fehler, der das fehlerhafte Feld benennt, und z.infer liefert dir den TypeScript-Typ aus demselben Schema, sodass die beiden nie auseinanderlaufen. Für Daten von außerhalb deiner App ist das Schema die sicherere Wahl.
Lesen, was der Konverter geraten hat
Ein Feld, das in deinem Beispiel null war, bekommt den Typ null, weil das Beispiel keinen anderen Hinweis liefert. Ändere es zu string | null (oder .nullable() in Zod), sobald du weißt, was es enthält, oder aktiviere die Option, die null-Felder optional macht.
Ein leeres Array wird aus demselben Grund zu unknown[]. Datumswerte kommen in JSON als Strings an und bleiben daher Strings, in Zod kannst du einen davon zu z.string().datetime() oder Ähnlichem verschärfen, sobald du das Format kennst.
Typnamen ergeben sich aus den Schlüsseln: Ein Array staff erzeugt Staff, ein Objekt address erzeugt Address. Würden zwei Schlüssel denselben Namen ergeben, wird eine Zahl angehängt.
Füge JSON in das Feld ein oder behalte das Beispiel, um zu sehen, wie es sich verhält.
Lege den Namen des Root-Typs fest. Jedes verschachtelte Objekt bekommt einen Namen aus seinem Schlüssel.
Wähle Interface oder Type-Alias und ob Eigenschaften readonly sein sollen.
Kopiere das TypeScript, das Zod-Schema oder beides. Fehler im JSON werden mit der Meldung des Parsers angezeigt.
Füge in jedes Array zwei oder drei Einträge ein, damit optionale Felder erkannt werden.
Entferne sensible Werte, bevor du generierte Typen teilst, das Tool selbst lädt nie etwas hoch.
Halte Schemas neben dem Code, der die Daten abruft, und parse an dieser Grenze, nicht tief in Komponenten.
Verwende safeParse statt parse, wenn du eine freundliche Meldung zeigen willst, statt einen Fehler zu werfen.
Häufige Fragen
Sollte ich ein Interface oder einen Type-Alias verwenden?
Beide beschreiben Objektformen hier gleich gut. Interfaces mit demselben Namen werden zusammengeführt, was beim Erweitern von Bibliothekstypen hilft, Type-Aliase lassen sich nicht zusammenführen, können aber Unions benennen. Wähle einen Stil für die Codebasis und bleib dabei.
Wie bekomme ich den TypeScript-Typ aus einem Zod-Schema?
Verwende type User = z.infer<typeof UserSchema>. Die generierte Zod-Ausgabe enthält diese Zeile bereits unter jedem Schema, du musst also keine separaten Interfaces pflegen.
Warum hat ein Feld den Typ null?
Dein Beispiel hatte dort null, es gab also nichts anderes abzuleiten. Ersetze es durch den echten Typ in Verbindung mit null, zum Beispiel string | null, oder z.string().nullable() im Schema.
Wird mein JSON an einen Server gesendet?
Nein. Parsen und Generieren laufen in JavaScript auf dieser Seite. Du kannst die Seite laden, offline gehen, und sie funktioniert weiterhin.
Die Ausgabe verwenden
Eine Antwort mit dem generierten Schema validieren
safeParse gibt Erfolg oder eine Liste von Problemen zurück, statt einen Fehler zu werfen, was zu fetch-Code passt, der einen Fehlerzustand anzeigen soll.
Dieselbe Form als einfache Interfaces
Praktisch zum Typisieren von Props oder Funktionsargumenten, wenn die Daten bereits vertrauenswürdig sind.
JSON einfügen, Typen erhalten
Füge eine Beispielantwort ein. Der Konverter schreibt TypeScript-Interfaces und ein passendes Zod-Schema nebeneinander und führt jeden Eintrag eines Arrays zusammen, sodass Felder, die in manchen Einträgen fehlen, als optional herauskommen.