# JSON zu TypeScript

Konvertiert JSON-Daten in TypeScript-Interfaces oder Typ-Aliase mit Union-Typen, optionalen Feldern und verschachtelter Objekt-Inferenz

> Kanonische Seite: https://elysiatools.com/de/tools/json-to-typescript

- **Kategorie:** Development

- **Schlagwörter:** json, typescript, konvertieren, interface, typ, frontend

## Überblick

Konvertieren Sie Ihre JSON-Daten schnell und präzise in saubere TypeScript-Interfaces oder Typ-Aliase. Dieses Tool analysiert verschachtelte Objekte, Arrays und Datentypen automatisch, um typensichere Definitionen für Ihre Frontend-Entwicklung zu generieren.

## Eingaben

- **JSON-Eingabe** (textarea): { "name": "Alice", "age": 30, "roles": \["admin", "user"\], "address": { "city": "Shanghai", "zip": "200000" } }
- **Name des Wurzeltyps** (text): Root
- **Export-Stil** (select)
- **Optionale Felder** (checkbox)

## Wann verwenden

- Wenn Sie API-Antworten im JSON-Format erhalten und dafür passende TypeScript-Typen für Ihr Frontend-Projekt benötigen.
- Wenn Sie manuelle Tipparbeit und Fehler beim Nachbauen komplexer, verschachtelter JSON-Strukturen in TypeScript vermeiden wollen.
- Wenn Sie bestehende JSON-Konfigurationsdateien schnell in typisierte Schnittstellen umwandeln möchten.

## Funktionsweise

- Fügen Sie Ihre JSON-Daten in das Eingabefeld ein.
- Legen Sie den Namen des Wurzeltyps fest und wählen Sie den gewünschten Export-Stil (Interface oder Typ-Alias).
- Aktivieren Sie optional die Option für optionale Felder, um alle Eigenschaften als optional zu deklarieren.
- Kopieren Sie den automatisch generierten TypeScript-Code direkt in Ihre Codebasis.

## Anwendungsfälle

- Integration von REST-API-Antworten in Angular-, React- oder Vue-Anwendungen durch schnelle Typengenerierung.
- Erstellung von TypeScript-Definitionen für lokale JSON-Konfigurationsdateien oder Mock-Daten.
- Schnelle Typisierung von Webhook-Payloads für Node.js-Backend-Dienste.

## Häufig gestellte Fragen

### Unterstützt das Tool verschachtelte JSON-Objekte?

Ja, verschachtelte Objekte werden automatisch erkannt und in separate, referenzierte Interfaces oder Typen aufgeteilt.

### Kann ich zwischen Interfaces und Typ-Aliasen wählen?

Ja, Sie können im Export-Stil-Menü flexibel zwischen 'interface' und 'type' wechseln.

### Was passiert bei Arrays mit unterschiedlichen Datentypen?

Das Tool analysiert die Array-Elemente und generiert entsprechende Union-Typen wie zum Beispiel string oder number.

### Kann ich alle generierten Felder als optional markieren?

Ja, aktivieren Sie dafür einfach die Option 'Optionale Felder' vor der Generierung.

### Werden meine JSON-Daten an einen Server gesendet?

Nein, die Konvertierung findet vollständig lokal in Ihrem Browser statt, sodass Ihre Daten privat bleiben.

## Ähnliche Tools

- [Data-URI-Generator](https://elysiatools.com/de/tools/data-uri-generator): Konvertiert Dateien in Data URIs (Base64 oder prozent-kodiert), um Bilder, Schriftarten und Ressourcen direkt in HTML, CSS oder Markdown einzubetten
- [JSON-Schema-zu-Zod-Konverter](https://elysiatools.com/de/tools/json-schema-to-zod-schema-converter): Konvertiert JSON/YAML-Definitionen von JSON Schema in direkt nutzbaren Zod-Code fuer TypeScript-Projekte, inklusive verschachtelter Objekte, Arrays, Enums und gaengiger Validierungsregeln
- [JSON zu C# Class](https://elysiatools.com/de/tools/json-to-csharp): Konvertiert JSON-Daten in C#-Klassen mit PascalCase-Eigenschaften, JsonPropertyName-Attributen und verschachtelter Typ-Inferenz
- [JSON zu Go Struct](https://elysiatools.com/de/tools/json-to-go): Konvertiert JSON-Daten in Go-Struct-Definitionen mit json-Tags, exportierten PascalCase-Feldern und verschachtelter Typ-Inferenz
- [JSON zu Java Class](https://elysiatools.com/de/tools/json-to-java): Konvertiert JSON-Daten in Java-Klassen mit Jackson @JsonProperty-Annotationen, privaten Feldern, Gettern und Settern
- [JSON zu Kotlin Data Class](https://elysiatools.com/de/tools/json-to-kotlin): Konvertiert JSON-Daten in Kotlin Data Classes mit @SerializedName-Annotationen, Nullable-Handhabung und verschachtelter Typ-Inferenz
- [JSON zu Rust Struct](https://elysiatools.com/de/tools/json-to-rust): Konvertiert JSON-Daten in Rust-Structs mit serde Serialize/Deserialize-Derives, snake_case-Feldern und serde-rename-Attributen
- [Log-zu-Sequenzdiagramm-Konverter](https://elysiatools.com/de/tools/log-sequence-diagram-converter): Wandelt strukturierte Service-Logs in Mermaid- oder PlantUML-Sequenzdiagramme mit Latenz- und Fehlerhinweisen um

## Beispiele

- [Terraform-Plan-JSON-Beispiele](https://elysiatools.com/de/samples/terraform-plan-json-samples): Terraform-Plan-JSON-Dateien fuer Abhaengigkeitsvisualisierung und Change-Review, passend zu terraform show -json
- [Web TypeScript Datenserialisierungsbeispiele](https://elysiatools.com/de/samples/web-serialization-typescript): Web TypeScript Datenserialisierungsbeispiele einschließlich JSON-Serialisierung/Deserialisierung und XML-Parsing
- [Chat-JSON-Beispiele](https://elysiatools.com/de/samples/chat-transcript-json): JSON-Beispiele für Chat-Transkripte mit mehreren Rollen
- [JSON-Beispiele](https://elysiatools.com/de/samples/json): JSON (JavaScript Object Notation)-Formatbeispiele von einfachen bis komplexen Strukturen

## Verwandte Inhalte

- [JSON-zu-typisiertem-Code-Generatoren](https://elysiatools.com/de/hubs/json-to-typed-code-generators): Erzeugen Sie typisierte Modelle aus JSON oder Schemas fuer TypeScript, Go, Rust, Kotlin, Java, C# und Zod-Validierung.