So nutzt du: JSON zu TypeScript
- Füge ein repräsentatives JSON-Beispiel ein, z. B. eine Antwort, die du aus dem Netzwerk-Tab deines Browsers kopiert hast.
- Lege den Namen des Root-Typs fest, zum Beispiel
UseroderApiResponse. - Wähle
interfaceodertype, die Array-Syntax und ob die Deklarationen exportiert oder Eigenschaften als readonly markiert werden sollen. - Kopiere den generierten Code in eine
.ts-Datei oder lade ihn herunter.
Was macht ein JSON-zu-TypeScript-Konverter?
Er leitet statische Typen aus Beispieldaten ab. Statt für jede API-Antwort ein Interface von Hand zu schreiben, fügst du eine echte Antwort ein und erhältst passende TypeScript-Deklarationen: ein benanntes Interface pro verschachteltem Objekt, typisierte Arrays und Unions, wo sich Werte unterscheiden. Das ist der schnellste Weg zu Autovervollständigung und Prüfungen zur Compile-Zeit für Daten aus einer REST-API, einem Webhook oder einer JSON-Konfigurationsdatei.
So werden Typen abgeleitet
| JSON-Wert | TypeScript-Typ |
|---|---|
"text" | string |
42, 3.14 | number |
true | boolean |
null | null (in Kombination mit anderen Typen, z. B. string | null) |
{ … } | Ein benanntes Interface (Schlüssel profile → Profile) |
["a", "b"] | string[] |
[1, "two"] | (number | string)[] |
[] | unknown[] (kein Beispiel zum Ableiten vorhanden) |
Arrays aus Objekten werden zusammengeführt
Enthält ein Array mehrere Objekte, führt der Generator sie zu einem einzigen Interface zusammen, statt nur das erste Element zu nehmen. Ein Schlüssel, der nur in manchen Elementen vorkommt, wird optional (archived?: boolean). Ein Schlüssel, dessen Werte sich zwischen den Elementen unterscheiden, bekommt einen Union-Type (license: string | null). Die Interfaces der Array-Elemente werden nach der Einzahl des Schlüssels benannt: repos → Repo, categories → Category. Gleiche Strukturen, die an verschiedenen Stellen vorkommen, werden nur einmal deklariert und wiederverwendet.
interface vs. type
Bei Objektstrukturen sind beide fast austauschbar. interface-Deklarationen lassen sich mit extends erweitern und durch erneutes Deklarieren zusammenführen, außerdem liefern sie oft klarere Fehlermeldungen. type-Aliase können dagegen Unions, Tupel und Mapped Types ausdrücken. Viele Teams verwenden Interfaces für Datenmodelle. Wähle, was zu deinen Lint-Regeln passt (z. B. @typescript-eslint/consistent-type-definitions).
Grenzen der Ableitung – prüfe die Ausgabe
Ein Beispiel zeigt nur, was vorhanden war. Ein Feld, das in deinem Beispiel null ist, wird als null typisiert. Passe es dann an den echten Typ an, z. B. string | null. Datumswerte kommen als ISO-Strings und werden als string typisiert, da JSON keinen Datumstyp kennt. Schlüssel, die keine gültigen Bezeichner sind, wie social-links, werden automatisch in Anführungszeichen gesetzt. Für die Laufzeitvalidierung von unsicheren Eingaben kombinierst du diese Typen mit einem Schema-Validator wie Zod. Bereinige dein Beispiel vorher mit dem JSON Formatter, oder konvertiere YAML-Konfigurationen mit YAML zu JSON, bevor du Typen generierst.
Auch gesucht als: json zu ts, json zu interface, typescript interface generator, json2ts, typescript typen aus json, json zu typescript konverter.
Passende Tools zu: JSON zu TypeScript
- CSV zu JSON — Füge CSV oder TSV ein und erhalte ein JSON-Array aus Objekten.
- SVG zu JSX Konverter — Füge ein SVG aus Figma, Illustrator oder einem Icon-Set ein und erhalte eine fertige React-Komponente (JSX oder TSX) mit einer sicheren Vorschau des Icons.
- cURL zu Code — Füge einen curl-Befehl ein, z.
- JSON-Schema-Validator — Füge ein Schema und etwas JSON ein, um genau zu sehen, welche Werte welche Regel verletzen, oder erzeuge ein Startschema aus Beispieldaten.
Häufige Fragen
Sollte ich für JSON-Daten interface oder type verwenden?
extends, Type-Aliase decken zusätzlich Unions und Mapped Types ab. Wähle den Stil, den der Style Guide deines Projekts vorgibt. Der Schalter ändert die gesamte Ausgabe.Wie werden optionale Eigenschaften erkannt?
? als optional markiert. Du kannst außerdem alle nullable Eigenschaften über die Checkbox unter der Ausgabe optional machen.Warum ist eine Eigenschaft als null typisiert?
null war. Daher gibt es keine Information über ihren echten Typ. Ersetze null durch den erwarteten Typ, z. B. string | null, oder füge ein Beispiel ein, in dem der Wert ausgefüllt ist.