JSON to TypeScript

Was ist die JSON-zu-TypeScript-Konvertierung?

JSON-Payload einfügen und TypeScript-Interfaces zurückbekommen — typisierte Verträge, die exakt beschreiben, welche Properties ein Objekt hat und welchen Typ jede davon besitzt. Ohne sie kommt data aus JSON.parse() als any an, ohne Editor-Unterstützung und ohne Compiler-Prüfungen bei Property-Zugriff oder Zuweisung. Die Konvertierung von JSON zu TypeScript verschafft diese Typsicherheit, ohne Interfaces manuell schreiben zu müssen.

TypeScript deckt alle sechs JSON-Wertetypen ab: string, number, boolean, null, object und array. Jedes verschachtelte JSON-Objekt wird zu einem eigenen benannten Interface. Arrays werden anhand ihres ersten Elements typisiert. Das Ergebnis entspricht dem, was JSON.parse() zur Laufzeit tatsächlich zurückgibt, sodass die Interfaces reale Daten widerspiegeln statt Vermutungen.

Interfaces für große oder tief verschachtelte JSON-Strukturen manuell zu schreiben ist aufwendig und fehleranfällig. Ein JSON-zu-TypeScript-Generator liest die Struktur automatisch, verarbeitet Verschachtelungen rekursiv und gibt sauberen Interface-Code in Sekunden aus. Das ist besonders nützlich beim Einbinden einer unbekannten API, beim Prototyping mit Mock-Daten oder beim Migrieren einer JavaScript-Codebase nach TypeScript. Außerdem entfällt das manuelle Nachverfolgen von verschachtelten Property-Namen und Typen, sodass der Fokus auf der Anwendungslogik statt auf Type-Boilerplate liegen kann.

Warum einen JSON-zu-TypeScript-Generator verwenden?

TypeScript-Interfaces von Hand zu generieren ist bei kleinen Objekten praktikabel, bricht aber bei verschachtelten Strukturen oder großen API-Antworten schnell zusammen. Eine API-Antwort mit 50 Feldern und drei Verschachtelungsebenen bedeutet manuell Dutzende von Interfaces — jedes eine potenzielle Quelle für Tippfehler oder übersehene Nullable-Felder. Ein automatisierter Generator erzeugt die komplette Menge in Millisekunden und reduziert das Risiko von Typ-Inkompatibilitäten zwischen Code und den verarbeiteten Daten. Über die Genauigkeit hinaus hält er die Types mit dem tatsächlichen API-Vertrag synchron. Wenn ein Service seine Response-Struktur ändert, einfach das aktualisierte JSON einfügen und neu generieren — deutlich schneller als jede Property aufzuspüren, die sich in einer handgeschriebenen Interface-Datei verschoben hat.

JSON-zu-TypeScript-Anwendungsfälle

JSON-zu-TypeScript-Typ-Mapping-Referenz

Jeder JSON-Wert wird einem TypeScript-Typ zugeordnet. Die Tabelle zeigt, wie jeder JSON-Primitiv- und Strukturtyp übersetzt wird. Dieses Mapping folgt dem ECMA-404-JSON-Standard und den eingebauten TypeScript-Typen.

TypeScript interface vs. type-Alias

TypeScript bietet zwei Wege, Objektstrukturen zu beschreiben: Interface-Deklarationen und Type-Aliases. Beide eignen sich zur Darstellung von JSON-Strukturen, unterscheiden sich aber in Erweiterung und Merging-Verhalten. Die meisten JSON-zu-TypeScript-Generatoren geben Interfaces aus, weil sie die idiomatische Wahl für Objektstrukturen in TypeScript sind.

Code-Beispiele

Nachfolgend Beispiele zum Generieren von TypeScript-Interfaces aus JSON in verschiedenen Sprachen und Tools. Jeder Ausschnitt erzeugt ausführbare Ausgabe.

// Manual interface definition from a JSON shape
const json = '{"id": 1, "name": "Alice", "active": true}';
const parsed = JSON.parse(json);

interface User {
  id: number;
  name: string;
  active: boolean;
}

const user: User = parsed;
console.log(user.name); // "Alice" — fully typed

import JsonToTS from 'json-to-ts';

const json = {
  id: 1,
  name: "Alice",
  address: { street: "123 Main St", city: "Springfield" },
  tags: ["admin", "user"]
};

const interfaces = JsonToTS(json, { rootName: "User" });
console.log(interfaces.join("\n\n"));
// interface Address {
//   street: string;
//   city: string;
// }
//
// interface User {
//   id: number;
//   name: string;
//   address: Address;
//   tags: string[];
// }

# Install: pip install datamodel-code-generator
# Generate TypeScript-style types from JSON using Pydantic models

# Command line:
# datamodel-codegen --input data.json --output model.py

# Or generate TypeScript directly with quicktype:
# pip install quicktype
# quicktype --lang ts --src data.json --out types.ts

import json

data = {"id": 1, "name": "Alice", "scores": [98, 85, 92]}

# Python equivalent using TypedDict (Python 3.8+)
from typing import TypedDict, List

class User(TypedDict):
    id: int
    name: str
    scores: List[int]

user: User = data  # type-checked by mypy

# Install quicktype globally
npm install -g quicktype

# Generate TypeScript interfaces from a JSON file
quicktype --lang ts --src data.json --out types.ts

# From a JSON string via stdin
echo '{"id": 1, "name": "Alice"}' | quicktype --lang ts

# Output:
# export interface Root {
#   id:   number;
#   name: string;
# }

Häufig gestellte Fragen