JSON zu TypeScriptLokale Interfaces und Typaliase
de

AppHelp

JSON in TypeScript-Typen umwandeln

Füge ein JSON-Objekt oder mehrere Beispiele ein und erhalte sofort editierbare TypeScript-Definitionen mit optionaler Schlüsselerkennung, Namensoptionen, Kopieren und .ts-Download.

Arbeitsbereich für JSON-Typen

JSON einfügen und sofort editierbare TypeScript-Definitionen erhalten.

Lokal im Browser
174 Zeichen16 Zeilen
TypeScript-Ausgabe
array2 Typen4 Eigenschaften
export type Root = RootItem[];

export interface RootItem {
  id: number;
  name: string;
  roles: string[];
  nickname?: string;
}

Die Typen werden aus Beispielwerten abgeleitet. Prüfe optionale, nullable und leere Array-Felder vor dem Produktionseinsatz.

Häufige Aufgaben

  • JSON zu TypeScript
  • JSON TypeScript Konverter
  • TypeScript Interface Generator
  • TypeScript aus JSON erzeugen
  • JSON zu TS online
  • JSON Array TypeScript
  • JSON Typalias
  • TypeScript Typen generieren
  • lokaler JSON Konverter
  • kostenloser TypeScript Generator

Kurze Antwort

Füge gültiges JSON ein, um sofort TypeScript-Interfaces oder Typaliase zu erzeugen. Verschachtelte Objekte werden benannte Deklarationen, Array-Beispiele werden zusammengeführt, fehlende Schlüssel können optional werden, gemischte Werte ergeben Unions und null bleibt sichtbar – vollständig lokal im Browser.

So nutzt du das Tool

  1. 1. Repräsentatives JSON einfügenNutze ein echtes, aber nicht sensibles API-Beispiel. Mehrere Array-Objekte verbessern die Erkennung optionaler Schlüssel und Unions.
  2. 2. Ausgabe gestaltenWähle Wurzelname, interface oder type, Array-Schreibweise, optionale Schlüssel, readonly und Formatierung.
  3. 3. Grenzfälle prüfenKontrolliere leere Arrays, null, gemischte Primitive, Datumsstrings und umbenannte Eigenschaften gegen den echten API-Vertrag.
  4. 4. Kopieren oder herunterladenKopiere die Deklarationen oder lade types.ts und ergänze Kommentare, Enums, Brand-Typen oder Laufzeitvalidierung.

Beispiele

Einfaches Objekt

Eingabe
{"id":1,"name":"Ada","active":true}
Ausgabe
export interface Root { id: number; name: string; active: boolean; }

Optionaler Array-Schlüssel

Eingabe
[{"id":1},{"id":2,"nickname":"lin"}]
Ausgabe
export interface Root { id: number; nickname?: string; }

Mit aktivierter Erkennung erhalten nur teilweise vorhandene Schlüssel ein ?.

Nullable-Feld

Eingabe
[{"score":9.5},{"score":null}]
Ausgabe
score: number | null;

null bleibt erhalten und wird nicht still zu any.

Typische Anwendungsfälle

  • API-Antworten für Frontend-Projekte typisieren
  • Webhook-Payloads und Konfigurationen dokumentieren
  • Mehrere Objektbeispiele vor der Vertragsdefinition vergleichen
  • Starttypen für Tests, Fixtures und Datenpipelines erstellen
  • JSON-Beispiele in reviewbare Deklarationen umwandeln

Sonderfälle

  • Ein Beispiel beweist nicht alle optionalen Felder oder Enum-Werte; variierende Array-Objekte liefern bessere Hinweise.
  • Leere Arrays werden mangels Elementen zu unknown[] oder any[].
  • ISO-ähnliche Strings bleiben standardmäßig string; auch bei Date enthält Laufzeit-JSON weiterhin Strings.
  • camelCase ändert Schlüsselnamen und kann bei snake_case-APIs eine Zuordnungsschicht erfordern.
  • Statische TypeScript-Typen validieren keine Laufzeitdaten; für fremde Daten ist ein Schema nötig.

Funktionen

  • Sofortige JSON-zu-TypeScript-Konvertierung ohne Upload
  • Interfaces oder Typaliase mit frei wählbarem Wurzelnamen
  • Erkennung von Objekten, Arrays, Unions, null und optionalen Schlüsseln
  • Readonly-, Semikolon-, Export-, camelCase-, Date- und Array-Optionen
  • Vier realistische Beispiele und direkte JSON-Fehler
  • Code kopieren oder als editierbare .ts-Datei laden

Verwandte Tools

JSON-FormatterJSON vor der Typgenerierung validieren und formatieren.JSON-Schema-GeneratorEin portables, sprachübergreifendes Datenschema erzeugen.JSON-DiffAPI-Beispiele auf geänderte Felder und Werte vergleichen.JSON-ValidatorSyntax und Parse-Fehler lokal prüfen.

Häufig gestellte Fragen

Erzeugt das Tool Interfaces oder Typaliase?
Beides. Der gewählte Stil wird auf alle erzeugten Objektdeklarationen angewendet.
Wie werden optionale Eigenschaften erkannt?
Fehlt ein Schlüssel in einigen Objekten eines Arrays, erhält er bei aktivierter Option ein ?.
Wie werden null und gemischte Werte behandelt?
Beobachtete Typen werden zu Unions kombiniert, etwa number | null.
Welcher Typ entsteht für ein leeres Array?
Ohne Elementprobe wird je nach Auswahl unknown[] oder any[] erzeugt.
Validiert das erzeugte TypeScript JSON zur Laufzeit?
Nein. TypeScript-Typen werden zur Laufzeit entfernt; untrusted Daten benötigen ein Laufzeitschema.
Wird mein JSON hochgeladen?
Nein. Parsing, Inferenz, Kopieren und .ts-Erzeugung passieren lokal im Browser.