JSON to TypeScript

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.

Types are inferred from one sample, so they describe that sample exactly: a key absent from some array items becomes optional, mixed arrays become element unions, and a null stays null rather than being guessed at. Output is deterministic — the same JSON always produces the same file.

Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand JSON to TypeScript

Dieser Generator liest eine JSON-Stichprobe und schreibt die TypeScript-Interfaces, die ihre Struktur beschreiben.

How it works

Er läuft die Stichprobe durch und leitet für jeden Schlüssel einen Typ aus dem gefundenen Wert ab: Eine Zeichenkette wird zu string, eine Zahl zu number, ein verschachteltes Objekt zu einem eigenen benannten Interface, und ein Array zum Elementtyp gefolgt von []. Die Ableitung hat genau ein Beispiel zur Verfügung, die Ausgabe beschreibt dieses Beispiel also präzise – es ist ein erster Entwurf, den Sie bearbeiten, und kein aus einem Vertrag abgeleiteter Typ.

When to use it

  • Eine Antwort einer fremden API typisieren, für die keine Typen veröffentlicht sind.
  • Eine aufgezeichnete Payload oder eine Test-Fixture in Interfaces überführen.
  • Einen ersten Entwurf für eine große verschachtelte Antwort erhalten, statt sie von Hand zu tippen.
  • Die tatsächliche Struktur einer Antwort sehen, einschließlich Feldern, die die Dokumentation nie erwähnt.

Watch out for

  • Ein optionales Feld, das in der Stichprobe zufällig fehlt, kommt als erforderlich heraus, und ein vorhandenes Feld mit dem Wert null sagt dem Generator nichts über seinen echten Typ. Fügen Sie eine Stichprobe ein, die die unangenehmen Fälle enthält, und markieren Sie die optionalen Felder dann selbst.
  • Jede Zahl wird zu number. TypeScript hat keinen Ganzzahltyp, der Unterschied zwischen einer ID und einem Preis geht also verloren – und eine ID jenseits von 2^53 hatte ihre Genauigkeit bereits beim Parsen des JSON verloren, bevor der Generator sie überhaupt sah.
  • Ein Feld, dessen Typ zwischen Antworten wechselt – mal eine Zeichenkette, mal null, mal ein Objekt –, wird aus der Fassung typisiert, die Sie eingefügt haben. Das erzeugte Interface kompiliert und ist dann zur Laufzeit falsch.

Not the right tool for: Ein Schema zu ersetzen. Wenn die API ein OpenAPI- oder JSON-Schema-Dokument veröffentlicht, erzeugen Sie Typen daraus – es beschreibt jede Antwort und nicht nur eine davon.

Frequently Asked Questions

Wie wandle ich JSON in ein TypeScript-Interface um?

Fügen Sie eine repräsentative JSON-Antwort ein und benennen Sie das Wurzel-Interface. Die Typen erscheinen beim Tippen: Verschachtelte Objekte werden zu eigenen benannten Interfaces, Arrays werden über ihre Elemente typisiert, und das Ergebnis lässt sich in eine .ts-Datei einfügen oder herunterladen.

Wie werden optionale Eigenschaften erkannt?

Aus einem Array von Objekten wird jeder Schlüssel, der in mindestens einem Element fehlt, mit einem Fragezeichen als optional markiert. Deshalb ergeben mehrere repräsentative Datensätze bessere Typen als ein einzelner – der Generator sieht nur, was die Stichprobe ihm zeigt.

Was passiert mit null-Werten?

Ein null wird als null typisiert statt geraten, ein Schlüssel, der sowohl als Zahl als auch als null auftritt, wird also number | null. Aktivieren Sie „Nulls werden optional“, wenn Ihre API null im Sinne von „nicht vorhanden“ verwendet, dann wird der Schlüssel stattdessen optional.

How to Use JSON to TypeScript

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.