JSON zu TypeScript
Verwandeln Sie ein JSON-Objekt in typisierte TypeScript-Interfaces.
- Sofort
- Kostenlos
- Privat (lokal verarbeitet)
- Ohne Anmeldung
Eine API-Antwort in Sekunden typisieren
Statt die Interfaces zu einem großen JSON von Hand zu schreiben, fügen Sie es hier ein. Das Tool leitet Typen rekursiv ab: verschachtelte Objekte zu eigenen Interfaces, typisierte Arrays, optionale Felder mit „?“ markiert.
-
JSON einfügen
Eine API-Antwort, eine Konfigdatei, jedes Objekt.
-
Wurzel benennen
„Root“ als Standard, oder Ihr Wunschname.
-
Interfaces kopieren
Bereit zum Einfügen in Ihre .ts-Datei.
Inferenz-Beispiel
| JSON-Wert | Abgeleiteter Typ |
|---|---|
| "name": "Ada" | name: string |
| "age": 36 | age: number |
| "roles": ["admin"] | roles: string[] |
| "profile": { … } | profile: Profile |
| (Schlüssel fehlt in einem Array-Objekt) | feld?: typ |
Inferenz aus einem Beispiel: Denken Sie daran, null zu verfeinern (oft als Union string | null) und die Typen danach zu prüfen. Alles geschieht lokal, Ihr JSON verlässt den Browser nie.
Häufige Fragen
Wie werden die Typen abgeleitet?
Das Tool prüft jeden Wert: eine Zahl wird number, ein String string, ein Boolean boolean. Objekte werden zu Interfaces, benannt nach ihrem Schlüssel, und Arrays werden nach ihren Elementen typisiert (string[], MeinTyp[]…).
Wie werden optionale Felder erkannt?
Enthält ein Array mehrere Objekte, führt das Tool ihre Schlüssel zusammen. Ein in manchen, aber nicht allen Objekten vorhandener Schlüssel wird mit „?“ als optional markiert. Genau das erwartet man bei heterogenen API-Daten.
Was passiert mit null-Werten oder leeren Arrays?
Ein null-Wert wird als null typisiert (manuell zu verfeinern, oft als Union wie string | null). Ein leeres Array wird unknown[], da sein Elementtyp aus einem einzigen Beispiel nicht bestimmbar ist.
Ist das Ergebnis bereit zum Einfügen in meinen Code?
Ja: Das Wurzel-Interface wird nach Ihrer Wahl benannt („Root“ als Standard), Sub-Interfaces stehen darüber, und die Syntax ist gültiges TypeScript. Benennen Sie die Interfaces nach Ihrer Domäne für mehr Klarheit.