Was ist der Unterschied zwischen optional (?) und nullable (| null)?

Optional bedeutet, der Key fehlte bei manchen Array-Items. Nullable bedeutet, der Key war vorhanden und der Wert war JSON-null. email?: string erlaubt das Weglassen des Felds. note: string | null verlangt den Key. Dieser Konverter fasst sie nicht zu email?: string | null zusammen, ausser das Beispiel zeigt beides.

Soll ich interface oder type alias ausgeben?

Nutzen Sie interface fuer Objektformen, die Sie ueber Dateien hinweg erweitern oder mergen. Nutzen Sie type alias fuer Unions, Intersections und Mapped Types. Fuer eine typische API-Antwort funktionieren beide; diese Seite nimmt interface als Standard, weil das der uebliche TypeScript-Stil fuer JSON-Modelle ist.

Warum ist ein Feld unknown[] oder Record ?

Leere Arrays haben keine Elemente zum Pruefen, der Fallback ist unknown[]. Leere Objekte haben keine Keys, der Fallback ist Record . Fuegen Sie ein gefuelltes Beispiel ein, um einen konkreten Elementtyp oder ein verschachteltes Interface zu bekommen.

Ersetzt das quicktype?

Nein. quicktype.io deckt Multi-Language-Codegen und Runtime-Validatoren ab. Diese Seite ist ein privater, clientseitiger JSON-zu-TypeScript-Interface-Konverter fuer eine eingefuegte Payload: keine Installation, kein Konto, und ein Bericht, der optionale Keys von JSON-null trennt.

Wird mein JSON hochgeladen?

Nein. Parsen und Inferenz laufen nur im Browser. Sicher fuer interne API-Antworten, Tokens und PII. Pruefen Sie in DevTools Network: Konvertieren sendet keine Anfrage.

Kann ich Typen aus einem JSON-Array erzeugen?

Ja, und das sollten Sie, wenn Keys variieren. Ein Array von Datensaetzen wird zu einem Interface zusammengefuehrt. Fehlende Keys werden optional. Wenn Sie die Root Users nennen, ist die Ausgabe interface User plus type Users = User[]. Wenn Sie sie User nennen, tippen Sie die Payload als User[].

Entwickler-Tools

JSON-zu-TypeScript-Interface-Konverter

Erzeugen Sie TypeScript-Interfaces aus einem JSON-Beispiel im Browser: kein Konto, kein Upload, kein Codegen-CLI.

Beispiel laden

JSON-Beispiel

Die Konvertierung laeuft im Browser. Das JSON verlaesst dieses Geraet nicht.

Root-Name

PascalCase-Name der obersten Schnittstelle. Ein JSON-Array namens Users erzeugt User plus type Users = User[].

Ausgeben als

interface ist die uebliche API-Antwortform und erlaubt Declaration Merging. type alias passt zu Unions und Mapped Types.

Interfaces

Optionale Keys

Nullable Keys

Unions

? bedeutet, der Key fehlte bei manchen Array-Elementen. | null bedeutet, das Beispiel enthielt JSON-null. Das ist nicht dasselbe.

Inferenz-Hinweise

Die JSON-Wurzel ist ein Array. Tippen Sie die Payload als Root[] (oder den Listen-Alias bei einem Pluralnamen).

User.lastLogin war nur null. Fuegen Sie einen echten Wert ein, um den Nicht-Null-Typ zu inferieren.

Bericht der inferierten Eigenschaften
Interface	Key	Typ	Flags
Address	city	string	erforderlich
Address	postcode	string	optional ?
User	id	number	erforderlich
User	name	string	erforderlich
User	role	string	erforderlich
User	email	string	optional ?
User	address	Address	erforderlich
User	lastLogin	null	optional ? \| null
User	tags	string[]	optional ?

TypeScript

export interface Address {
  city: string;
  postcode?: string;
}

export interface User {
  id: number;
  name: string;
  role: string;
  /** Email string */
  email?: string;
  address: Address;
  lastLogin?: null;
  tags?: string[];
}

Über JSON-zu-TypeScript-Interface-Konverter

Erzeugen Sie TypeScript-Interfaces aus einem JSON-Beispiel im Browser: kein Konto, kein Upload, kein Codegen-CLI. Fuegen Sie eine API-Antwort ein oder, besser, ein Array von Datensaetzen. Verschachtelte Objekte werden benannte Interfaces, Arrays werden aus jedem Element typisiert (nicht nur dem ersten), identische Formen werden zusammengefuehrt. Der Walker vermischt fehlende Keys und JSON-null nicht: ein auf manchen Items weggelassener Key ist optional (`?`); ein vorhandener Key mit null ist `T | null`. Kopieren Sie das Ergebnis in eine `.ts`-Datei oder laden Sie sie herunter. Kombinieren Sie das mit dem JSON-Minifier, wenn die Payload minifiziert ankam, oder dem JSONPath Tester, um zuerst ein Feld zu pruefen.

So verwenden Sie JSON-zu-TypeScript-Interface-Konverter

JSON einfuegen (ein Array von Datensaetzen inferiert optionale Keys genauer als ein einzelnes Objekt). Laden Sie ein Beispiel, um optional vs nullable zu sehen.
Root-Namen setzen (User, Order, ApiResponse). interface (Standard) oder type alias waehlen.
Den Bericht lesen: Anzahl der Deklarationen, optionale Keys, nullable Keys und Unions. Warnungen markieren leere Arrays, leere Objekte, nur-null-Felder und gequotete Keys.
TypeScript kopieren oder eine .ts-Datei herunterladen. In types/ ablegen und fetch / TanStack Query mit dem Root-Namen annotieren.
Es wird nichts an einen Server gesendet. Ungueltiges JSON meldet Zeile und Spalte.

Beispiele für JSON-zu-TypeScript-Interface-Konverter

Optionaler Key aus einem Array von Datensaetzen

[{"sku":"A1","qty":2},{"sku":"B7","qty":1,"gift":true}] wird zu Order mit gift?: boolean. Der Key ist optional, weil das erste Item ihn weggelassen hat - nicht weil der Wert null war.

Nullable vs optional

Zwei User, bei denen email in einer Zeile fehlt und note in der anderen null ist, ergeben email?: string und note: string | null. Fehlende Keys und JSON-null bleiben getrennt; die meisten Konverter fallen sie zusammen.

Benannte verschachtelte Interfaces

{"user":{"address":{"city":"London"}}} erzeugt Address, dann User, dann Root. Verschachtelte Objekte werden aus ihrem Key in PascalCase benannt, damit Sie Address allein importieren koennen.

Gequotete Keys und leere Container

{"content-type":"application/json","items":[],"meta":{}} quotet content-type, typisiert items als unknown[] und meta als Record<string, unknown>. Warnungen bitten um ein reicheres Beispiel.

interface vs type alias

Lassen Sie interface fuer API-Antwortformen (Declaration Merging, etwas bessere Fehler). Wechseln Sie zu type alias, wenn die Datei Unions oder Mapped Types enthalten wird. Zur Laufzeit ist beides identisch.

Häufige Anwendungsfälle

fetch()- oder axios-Antworten in React, Vue oder Next.js typisieren
TanStack Query / SWR-Generics aus einer echten Payload erzeugen
Einen Webhook-Body (Stripe, GitHub, Slack) in ein typisiertes Event verwandeln
Typen fuer ein Fixture entwerfen, bevor eine OpenAPI-Spec existiert
Ein JSON-Config-Blob in TypeScript mit Autocomplete umwandeln

Häufig gestellte Fragen zu JSON-zu-TypeScript-Interface-Konverter

Wie wandele ich JSON in ein TypeScript-Interface um?: JSON-Beispiel einfuegen, Root benennen und die erzeugten Interfaces kopieren. Die Konvertierung laeuft im Browser. Verschachtelte Objekte werden benannte Interfaces, Arrays werden aus jedem Element typisiert, und Keys, die in manchen Items fehlen, werden mit ? als optional markiert.
Was ist der Unterschied zwischen optional (?) und nullable (| null)?: Optional bedeutet, der Key fehlte bei manchen Array-Items. Nullable bedeutet, der Key war vorhanden und der Wert war JSON-null. email?: string erlaubt das Weglassen des Felds. note: string | null verlangt den Key. Dieser Konverter fasst sie nicht zu email?: string | null zusammen, ausser das Beispiel zeigt beides.
Soll ich interface oder type alias ausgeben?: Nutzen Sie interface fuer Objektformen, die Sie ueber Dateien hinweg erweitern oder mergen. Nutzen Sie type alias fuer Unions, Intersections und Mapped Types. Fuer eine typische API-Antwort funktionieren beide; diese Seite nimmt interface als Standard, weil das der uebliche TypeScript-Stil fuer JSON-Modelle ist.
Warum ist ein Feld unknown[] oder Record<string, unknown>?: Leere Arrays haben keine Elemente zum Pruefen, der Fallback ist unknown[]. Leere Objekte haben keine Keys, der Fallback ist Record<string, unknown>. Fuegen Sie ein gefuelltes Beispiel ein, um einen konkreten Elementtyp oder ein verschachteltes Interface zu bekommen.
Ersetzt das quicktype?: Nein. quicktype.io deckt Multi-Language-Codegen und Runtime-Validatoren ab. Diese Seite ist ein privater, clientseitiger JSON-zu-TypeScript-Interface-Konverter fuer eine eingefuegte Payload: keine Installation, kein Konto, und ein Bericht, der optionale Keys von JSON-null trennt.
Wird mein JSON hochgeladen?: Nein. Parsen und Inferenz laufen nur im Browser. Sicher fuer interne API-Antworten, Tokens und PII. Pruefen Sie in DevTools Network: Konvertieren sendet keine Anfrage.
Kann ich Typen aus einem JSON-Array erzeugen?: Ja, und das sollten Sie, wenn Keys variieren. Ein Array von Datensaetzen wird zu einem Interface zusammengefuehrt. Fehlende Keys werden optional. Wenn Sie die Root Users nennen, ist die Ausgabe interface User plus type Users = User[]. Wenn Sie sie User nennen, tippen Sie die Payload als User[].

JSON-Minifier und -Formatter

Kostenloser Online-JSON-Minifier und -Formatter. JSON minifizieren, um Payloads zu verkleinern, oder JSON mit 2-Leerzeichen-Einrückung beautifizieren (pretty-print). Validiert währenddessen - kein Upload nötig.

JSONPath-Tester

JSONPath online im Browser testen. Ein Feld aus JSON extrahieren, Filterbeispiel ausfuehren, normalisierte Pfade kopieren - nichts wird hochgeladen.

JSON-Schema-Generator

Kostenloser JSON-Schema-Generator im Browser. Beispiel-JSON einfuegen, Typen und Formate inferieren und ein Draft-07- oder 2020-12-Schema kopieren. Nichts wird hochgeladen.

JSON-zu-CSV-Konverter

JSON zu CSV und CSV zu JSON im Browser. Verschachtelte Objekte flachen, Punkt-Schluessel entflachen beim Rueckweg, NDJSON, Excel-EU-Preset, RFC 4180. Nichts wird hochgeladen.