JSON in TypeScript

Interfaces, Typen und Zod-Schemas

Keine Datenbank: AIMRAN speichert weder deine Dateien noch Texte oder Ergebnisse

Was ist JSON in TypeScript?

Wenn du mit TypeScript arbeitest und JSON-Daten aus einer API bekommst, ist es mühsam, die Typen von Hand zu schreiben. Dieses Tool liest ein JSON-Beispiel und erzeugt automatisch die Interfaces oder Types, die es beschreiben.

Es kann auch ein Zod-Schema erzeugen, um diese Daten zur Laufzeit zu validieren, inklusive abgeleitetem Typ.

So funktioniert es

  1. Füge dein JSON ein oder lade das Beispiel.
  2. Wähle die Ausgabe: TypeScript oder Zod-Schema.
  3. Wähle, ob als interface oder type deklariert werden soll.
  4. Gib den Namen des Root-Typs ein und aktiviere bei Bedarf „export hinzufügen“.
  5. Kopiere den erzeugten Code oder lade ihn herunter.

Vorteile

Technische Details

Das Tool leitet aus dem JSON-Wert einen strukturellen Typ ab: string, number, boolean, null, Objekte und Arrays. In Arrays werden die Typen aller Elemente vereinheitlicht; handelt es sich um Objekte, werden ihre Felder zusammengeführt und in einem Element fehlende Schlüssel als optional (?) markiert, bei unterschiedlichen Typen entsteht eine Union. Jedes verschachtelte Objekt erzeugt eine eigene Deklaration mit einem aus seinem Schlüssel abgeleiteten Namen. Leere Arrays werden als unknown[] typisiert. Im Zod-Modus werden z.object, z.array, z.union und .optional() erzeugt und type Name = z.infer<typeof NameSchema> ergänzt. Schlüssel, die keine gültigen Bezeichner sind, werden in Anführungszeichen gesetzt.

Häufige Fragen

Wie wandle ich JSON in ein TypeScript-Interface um?

Füge das JSON ein, wähle TypeScript und „interface“ und kopiere das Ergebnis. Jedes verschachtelte Objekt erhält ein eigenes Interface.

Was ist der Unterschied zwischen interface und type?

Zur Beschreibung von Objekten sind sie fast gleichwertig. Interfaces lassen sich erweitern und zusammenführen; types erlauben Unions und komplexere Typen.

Was ist Zod?

Eine TypeScript-Bibliothek zur Validierung von Daten zur Laufzeit. Das Schema prüft, ob die Daten die erwartete Form haben, und der Typ wird daraus abgeleitet.

Wie werden optionale Felder erkannt?

Fehlt in einem Array von Objekten ein Schlüssel in einem der Elemente, wird er als optional markiert.

Erkennt das Tool Datumswerte im JSON?

Nein. JSON hat keinen Datumstyp, daher werden Datumsangaben als string erzeugt.

Weitere Tools: Entwickler