MyDevTools
DE

JSON zu TypeScript Konverter

TypeScript-Interfaces oder Type-Aliase aus einem JSON-Beispiel erzeugen: verschachtelte Typen, zusammengeführte Array-Elemente, optionale Felder, export.

Eingaben und Dateien bleiben im Browser

JSON-Eingabe

Fügen Sie ein JSON-Beispiel ein – TypeScript-Interfaces entstehen während der Eingabe.

Im Editor rückt Tab ein. Drücken Sie Esc und dann Tab, um den Editor zu verlassen.

TypeScript-Ausgabe

TypeScript-Interfaces erscheinen hier...

Auf dieser Seite

Fügen Sie ein JSON-Beispiel ein – eine API-Antwort, eine Konfigurationsdatei, ein Test-Fixture – und erhalten Sie schon beim Tippen die passenden TypeScript-Deklarationen. Verschachtelte Objekte werden zu eigenen benannten Interfaces, sodass die Ausgabe direkt in eine .ts-Datei übernommen werden kann.

Detaillierte Funktionalität

Die Typen werden aus den Werten abgeleitet: string, number, boolean, null, Arrays als T[], gemischte Arrays als Unions wie (number | string | null)[] und ein leeres Array als unknown[]. Jedes verschachtelte Objekt erhält ein Interface, das nach seinem Pfad in PascalCase benannt ist (shipping_address innerhalb von Order → OrderShippingAddress). Alle Objekte eines Arrays werden zu einem Elementtyp zusammengeführt: Ein Schlüssel, der in manchen Elementen fehlt, wird optional, und ein Schlüssel mit unterschiedlichen Werttypen erhält eine Union.

Optionen: Root-Name legt den Namen des obersten Typs fest (Standard Root); export-Schlüsselwort ergänzt export vor jeder Deklaration; Optionale Felder (?) – standardmäßig aktiv – markiert Schlüssel mit dem Wert null als optional; Typ-Alias verwenden schreibt type X = { … }; statt interface X { … }. Ein Root-Array erzeugt einen Alias wie export type Users = UsersItem[];. Schlüssel, die keine gültigen Bezeichner sind, werden in Anführungszeichen gesetzt ("order-id": string;), und kollidierende Typnamen erhalten ein Zahlensuffix.

Die Ausgabe wird bei jeder Änderung (nach einer kurzen Pause) sowie bei Konvertieren oder Strg+Enter neu erzeugt; bei ungültigem JSON erscheint der Fehler des Parsers. Das Ergebnis steht in einem schreibgeschützten Editor, den Sie per Kopieren übernehmen oder mit Als .ts herunterladen als types.ts speichern können. Alles läuft lokal – das Beispiel wird nie hochgeladen oder gespeichert.

Praktische Beispiele

API-Objekt: {"id":7,"user_name":"ann","tags":["a"],"manager":null} ergibt mit Root-Name User und export-Schlüsselwort export interface User { id: number; user_name: string; tags: string[]; manager?: null; }.

Array unterschiedlicher Objekte: [{"id":1,"email":"[email protected]"},{"id":2,"phone":"555"}] ergibt mit Root-Name Users export interface UsersItem { id: number; email?: string; phone?: string; } und export type Users = UsersItem[];.

Type-Aliase und Schlüssel in Anführungszeichen: {"order-id":"A1","items":[{"sku":"x","qty":2}],"shipping_address":{"city":"Omsk"}} ergibt mit Root-Name Order und Typ-Alias verwenden type OrderItemsItem = { sku: string; qty: number; };, type OrderShippingAddress = { city: string; }; und type Order = { "order-id": string; items: OrderItemsItem[]; shipping_address: OrderShippingAddress; };.

So verwenden Sie dieses Tool

  1. JSON einfügen

    Fügen Sie ein JSON-Beispiel in den Editor JSON-Eingabe ein. Die TypeScript-Ausgabe wird automatisch aktualisiert.

  2. Optionen anpassen

    Legen Sie den Root-Name fest und schalten Sie export-Schlüsselwort, Optionale Felder (?) und Typ-Alias verwenden nach Bedarf um.

  3. Typen übernehmen

    Klicken Sie auf Kopieren, um die Deklarationen zu kopieren, oder auf Als .ts herunterladen, um sie als types.ts zu speichern.

Tipps und Best Practices

  • Ein Beispiel zeigt nur die enthaltenen Werte: Ein Feld, das im Beispiel null ist, wird als null typisiert – ersetzen Sie es von Hand durch den echten Typ (z. B. string | null).
  • Nehmen Sie mehrere Array-Elemente mit unterschiedlichen optionalen Feldern auf, damit der Elementtyp stimmt.
  • Alle Zahlen werden zu number, und Datumsangaben im ISO-Format bleiben string.
  • Deaktivieren Sie Optionale Felder (?), wenn null-Werte immer explizit gesendet werden und Sie manager: null als Pflichtschlüssel möchten.
  • Eigenschaftsnamen behalten ihre ursprüngliche Schreibweise; nur Typnamen werden in PascalCase umgewandelt.