Generieren Sie eine TypeScript-Schnittstelle aus JSON
Fügen Sie ein Beispielobjekt ein und erhalten Sie ein fertiges TypeScript-Interface: Im Beispiel wird id zu number, tags zu string[], und der Schlüssel display-name bleibt in Anführungszeichen, alles unter dem Namen UserRecord. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Wie jeder Typ ermittelt wird
Der Generator betrachtet jeden Wert Ihres Beispiels, nicht die Namen der Schlüssel. Text wird zu string, jede Zahl zu number, wahr oder falsch erhält einen eigenen Ja-Nein-Typ, und ein leerer Wert wird zu null. Objekte in Objekten werden zu verschachtelten Typen, und Listen werden nach allen Elementen beurteilt, nicht nur nach dem ersten: Eine reine Textliste ergibt string[], eine gemischte eine Vereinigung wie (string | number | null)[]. Schlüssel, die sich nicht direkt schreiben lassen, etwa display-name, bleiben in Anführungszeichen, und die Eigenschaften behalten die Reihenfolge des Originals.
Typische Fehler und wie Sie sie vermeiden
Ein einzelnes Beispiel beweist nicht, dass ein Wert optional ist, darum gelten alle Eigenschaften als erforderlich; passen Sie das von Hand an, wo Ihre echten Daten etwas weglassen können. Eine leere Liste liefert keine Hinweise und wird zu unknown[], ein leeres Objekt zu Record<string, never> – wählen Sie also ein Beispiel mit gefüllten Listen und Objekten. Der Text muss strenges Datenformat sein, kein JavaScript: Namen in doppelten Anführungszeichen, keine Kommentare, keine abschließenden Kommas und ein Objekt auf oberster Ebene. Datumstypen, feste Werte und Aufzählungen werden nie erfunden.
Beginnen Sie mit einem Beispiel aus echten Daten
Verschachtelte Objekte erscheinen als eingebettete Objekttypen in der Wurzelschnittstelle. Jede im Beispiel vorhandene Eigenschaft wird als erforderlich ausgegeben, da sich aus einem einzelnen Beispiel keine Optionalität beweisen lässt. Wählen Sie deshalb ein Beispiel mit den Feldern und Wertvarianten, die Ihre Anwendung tatsächlich empfängt.
Sie können außerdem einen Wurzelnamen wie <code>UserResponse</code> angeben; dieser muss ein gültiger, nicht reservierter TypeScript-Bezeichner sein. Ohne Angabe gilt <code>RootObject</code>. Skalare Werte, null und Arrays an der Wurzel werden abgelehnt.
Verstehen Sie Arrays, Nullwerte und verschachtelte Strukturen
Bei der Array-Inferenz werden sämtliche Elemente des Beispiels berücksichtigt, nicht nur das erste. Eine reine Zeichenkettenliste wird zu <code>string[]</code>, während eine gemischte Liste eine stabile Union wie <code>(string | number | null)[]</code> ergibt. Ein leeres Array enthält keine Information über seinen Elementtyp und wird deshalb als <code>unknown[]</code> dargestellt, statt einen möglicherweise irreführenden Typ zu erraten.
Objekte in Arrays erscheinen als eingebettete Objekttypen; verschachtelte Arrays werden rekursiv verarbeitet. Leere Objekte werden zu <code>Record<string, never></code> und halten damit fest, dass keine bekannten Felder beobachtet wurden. Schlüssel, die keine gewöhnlichen TypeScript-Bezeichner sein können, etwa wegen Leerzeichen, Satzzeichen oder reservierter Wörter, werden als Zeichenketteneigenschaften in Anführungszeichen ausgegeben.
Der Generator erfindet keine optionalen Merkmale, Datumswerte, Literaltypen, Enums oder domänenspezifischen Klassennamen.
Häufige Fragen
Welche Eingaben werden akzeptiert?
Arrays, Skalare und null an der Wurzel werden abgelehnt.
Wie werden leere Arrays typisiert?
Sie werden zu unknown[], da ein leeres Beispiel keine Information über den Elementtyp liefert.
Welchen Text kann ich einfügen?
Strengen Datentext, dessen oberste Ebene ein Objekt ist. Namen brauchen doppelte Anführungszeichen, Kommentare und abschließende Kommas sind nicht erlaubt. Ein Einzelwert, ein null oder eine Liste auf oberster Ebene wird abgelehnt, weil das Ergebnis ein Objekt beschreibt.
Kann ich den Namen des Interface selbst wählen?
Ja. Geben Sie einen Namen wie UserRecord an; er muss ein gültiger TypeScript-Name und darf kein reserviertes Wort sein. Lassen Sie den Namen leer, heißt das Interface RootObject, sodass Wiederholungen stets denselben Text liefern.
Welchen Typ erhält eine Liste mit gemischten Werten?
Alle Elemente werden geprüft, nicht nur das erste. Eine Liste nur aus Texten wird zu string[], eine Mischung ergibt eine stabile Vereinigung wie (string | number | null)[], sodass das Ergebnis genau zeigt, was das Beispiel enthält.
Werden Eigenschaften als optional markiert?
Nein. Ein einzelnes Beispiel kann nicht beweisen, dass ein Wert optional ist, deshalb wird jede gefundene Eigenschaft als erforderlich ausgegeben. Wo Ihre echten Daten etwas auslassen können, passen Sie das danach von Hand an.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/dev2/json-to-typescript-interface \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"json":"{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"}'const res = await fetch("https://api.kit.forhosting.com/dev2/json-to-typescript-interface", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"json": "{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/dev2/json-to-typescript-interface",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"json": "{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/dev2/json-to-typescript-interface", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"json":"{\\"id\\":42,\\"name\\":\\"Ada\\",\\"active\\":true,\\"tags\\":[\\"admin\\",\\"editor\\"],\\"profile\\":{\\"email\\":\\"ada@example.com\\",\\"score\\":9.5}}"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"json":"{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/dev2/json-to-typescript-interface", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"json": "{\"id\":42,\"name\":\"Ada\",\"active\":true,\"tags\":[\"admin\",\"editor\"],\"profile\":{\"email\":\"ada@example.com\",\"score\":9.5}}"
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "dev2.json_to_typescript_interface",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Limits
max_chars | 1000000 |
max_depth | 64 |
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Wandeln Sie ein repräsentatives JSON-Objekt in eine TypeScript-Schnittstelle um, ohne einen Generator zu installieren oder jeden verschachtelten Wert von Hand nachzuverfolgen. Das Werkzeug analysiert das Beispiel, prüft ein Objekt als Wurzel und erzeugt eine deterministische Schnittstelle für Zeichenketten, Zahlen, boolesche Werte, Nullwerte, Arrays und verschachtelte Objekte. Ungewöhnliche JSON-Schlüssel werden sicher in Anführungszeichen gesetzt, und Sie können den Namen der Wurzelschnittstelle wählen.
Beginnen Sie mit einem repräsentativen JSON-Objekt
Fügen Sie gültiges JSON ein, dessen Wurzelwert ein Objekt ist, beispielsweise eine API-Antwort, einen Konfigurationsdatensatz, eine Webhook-Nutzlast oder ein gespeichertes Dokument. Der Generator untersucht Werte statt Feldnamen: Eine Zeichenkette wird zu <code>string</code>, jede JSON-Zahl zu <code>number</code>, ein boolescher Wert zu <code>boolean</code> und ein Nullwert zu <code>null</code>. Die Eingabe muss JSON-Text und keine JavaScript-Objektsyntax sein: Eigenschaftsnamen benötigen doppelte Anführungszeichen, Kommentare sind unzulässig und abschließende Kommas ungültig.
Verstehen Sie Arrays, Nullwerte und verschachtelte Strukturen
Dadurch entspricht die Ausgabe den tatsächlichen Hinweisen im übergebenen JSON. Die Reihenfolge der Eigenschaften folgt dem ursprünglichen JSON, während Union-Mitglieder deterministisch sortiert werden.
Prüfen Sie die erzeugte Schnittstelle vor dem Produktionseinsatz
Vergleichen Sie mehrere Nutzlasten oder die Dokumentation des Anbieters, bevor Sie Eigenschaften als optional, nullfähig, enger gefasst oder über benannte Schnittstellen gemeinsam genutzt definieren. Enthält ein Beispiel null und ein anderes eine Zeichenkette, übernehmen Sie dieses Wissen in Ihren gepflegten Typ. Die deterministische Ausgabe erleichtert Reviews: Gleiche Eingaben und Namen ergeben stets denselben Text, ohne Netzwerk, Modelle, Zufall oder aktuelles Datum. Betrachten Sie die erzeugte Definition als genaue Beschreibung des übergebenen Beispiels und als guten ersten Entwurf für echten Anwendungscode, nicht als Beweis für den vollständigen Vertrag einer externen API. Ein Zeitstempel bleibt eine Zeichenkette, weil JSON keinen Datumstyp besitzt; eine Ganzzahl bleibt <code>number</code>, weil TypeScript zur Laufzeit nicht zwischen JSON-Ganzzahlen und anderen Zahlen unterscheidet. Ungültiges JSON, fehlender Text, unzulässige Namen, übermäßige Verschachtelung und andere Wurzelwerte liefern <code>invalid_input</code>. API-Aufrufe beginnen bei $0.002 pro Anfrage; im Browser läuft dieselbe reine Logik lokal.
Integrationsbeispiele
Eine unbekannte API-Antwort typisieren
Erstellen Sie aus einer erfassten Antwort eine erste praktische Schnittstelle und verfeinern Sie optionale Felder anhand der Dokumentation.
Webhook-Nutzlasten dokumentieren
Wandeln Sie ein repräsentatives Ereignis in lesbares TypeScript um, das Empfangsdienst und Tests gemeinsam nutzen können.
Fixtures und Integrationen vorbereiten
Erzeugen Sie stabile verschachtelte Typen für Konfigurationen, importierte Datensätze oder Testdaten ohne manuelle Feldverfolgung.
Technische Fragen
Werden Eigenschaften als optional markiert?
Nein. Vorhandene Eigenschaften sind erforderlich. Prüfen Sie mehrere Nutzlasten oder ein maßgebliches Schema auf optionale Felder.
Erkennt das Werkzeug Datumswerte oder Enums?
Nein. JSON-Zeichenketten bleiben string; Domänenbedeutung und enum-Einschränkungen werden nicht aus einem Beispiel abgeleitet.
Wie viel kostet eine API-Anfrage?
Eine API-Anfrage beginnt bei $0.002. Die Browser-Ausführung verwendet dieselbe deterministische Logik.