Anleitung
- Fügen Sie JSON in das Eingabefeld ein, öffnen Sie eine .json-Datei oder probieren Sie das Beispiel aus.
- Legen Sie den Namen des Root-Typs fest, zum Beispiel Order oder ApiResponse.
- Wählen Sie interface- oder type-Deklarationen und ob export und readonly hinzugefügt werden sollen.
- Kopieren Sie das generierte TypeScript oder laden Sie es als types.ts herunter.
So funktioniert es
Der Generator durchläuft das gesamte JSON-Dokument und erfasst, welche Werttypen an jeder Stelle vorkommen. Jedes JSON-Objekt wird zu einer eigenen benannten Deklaration. Der Name ergibt sich aus dem Eigenschaftsnamen in PascalCase, aus „shipping_address“ wird also ShippingAddress. Elemente eines Arrays werden nach der Singularform des Schlüssels benannt: Aus „items“ wird Item, aus „categories“ wird Category; Schlüssel, die nicht wie Pluralformen aussehen, erhalten das Suffix „Item“.
Alle Objekte innerhalb eines Arrays werden zu einem Interface zusammengeführt. Kommt ein Schlüssel nur in einigen davon vor, wird er mit „?“ als optional markiert. Hat ein Wert an verschiedenen Stellen unterschiedliche Typen, ist der Typ eine Union wie string | number. null bleibt ein eigener Typ, sodass ein Feld, das manchmal null ist, zu string | null wird. Ein leeres Array wird zu unknown[], weil sich daraus nichts ableiten lässt. Zwei Objekte mit exakt denselben Eigenschaften und Typen teilen sich ein Interface, statt Duplikate zu erzeugen. Schlüssel, die keine gültigen Bezeichner sind, wie „first-name“, werden in Anführungszeichen gesetzt.
Das Ergebnis beschreibt nur das eingefügte Beispiel. Ein Feld, das in Wirklichkeit optional oder null sein kann, wird als erforderlich und nicht nullbar ausgegeben, wenn Ihr Beispiel das nicht zeigt; Datumsangaben erscheinen als einfache Zeichenketten. Prüfen Sie die Typen anhand Ihrer API-Dokumentation, bevor Sie sich darauf verlassen.
Beispiele
API-Antwort typisieren
Fügen Sie eine Bestellung aus Ihrer Shop-API mit dem Root-Namen Order ein. Sie erhalten die Interfaces Order, Customer, Item und Shipping, mit note?: string bei Item, weil nur eines der beiden Items eine Notiz hat.
Schreibgeschützte Konfiguration
Fügen Sie eine config.json ein, aktivieren Sie „Eigenschaften als readonly markieren“ und fügen Sie das Ergebnis in config.d.ts ein, damit versehentliche Schreibzugriffe auf die Konfiguration vom Compiler erkannt werden.
Array auf oberster Ebene
Ein Listen-Endpunkt liefert [{…}, {…}]. Mit dem Root-Namen Product beginnt die Ausgabe mit „export type Product = ProductItem[];“ gefolgt vom ProductItem-Interface.
Häufig gestellte Fragen
Warum ist ein Feld in der Ausgabe optional?
Weil mindestens ein Objekt im selben Array diesen Schlüssel nicht hat. Wenn jedes Objekt ihn hat, ist er erforderlich. Fügen Sie mehrere Datensätze ein, um optionale Felder genauer zu bestimmen.
Warum wird ein Datum als Zeichenkette typisiert?
JSON hat keinen Datumstyp, daher werden Datumsangaben als Zeichenketten übertragen. Der Generator errät keine Formate. Ändern Sie den Typ selbst, wenn Ihr Code sie in Date-Objekte umwandelt.
Was ist der Unterschied zwischen interface und type?
Für Objektformen funktionieren sie fast gleich. Interfaces können durch spätere Deklarationen erweitert und zusammengeführt werden; Typ-Aliase lassen sich nicht erneut öffnen. Verwenden Sie den Stil, den Ihre Codebasis bereits nutzt.
Kann es Laufzeitvalidierung wie Zod-Schemas generieren?
Nein. Es erzeugt nur TypeScript-Deklarationen, die zur Kompilierzeit geprüft werden und Daten zur Laufzeit nicht validieren.
Datenschutz
Ihr JSON wird nur in Ihrem Browser analysiert. Es wird nichts hochgeladen, gespeichert oder in Analysen einbezogen.