JSON zu TypeScript
Konvertieren Sie ein JSON-Objekt in TypeScript-Schnittstellen. Verarbeitet verschachtelte Objekte, Arrays, optionale Eigenschaften und Union-Typen.
So verwenden Sie JSON zu TypeScript
- 1Fügen Sie Ihr JSON-Objekt oder API-Response ein.
- 2Geben Sie einen Namen für die Root-Schnittstelle ein.
- 3Klicken Sie auf Convert, um TypeScript-Schnittstellen zu generieren.
- 4Kopieren Sie den generierten TypeScript-Code.
ZenovayAnalytics
Analytics, für Gründer gebaut.
- Besucher-Tracking in Echtzeit
- Datenschutz zuerst, kein Cookie-Banner
- In zwei Minuten eingerichtet
Verwandte Tools
JSON-Formatter und Validator
Formatieren, validieren und verschönern Sie JSON-Daten mit Syntaxhervorhebung und Fehlererkennung.JWT-Decoder
Dekodieren und inspizieren Sie JWT-Token. Zeigen Sie Header, Payload und überprüfen Sie Signaturen.Base64 Encode/Decode
Kodieren Sie Text in Base64 oder dekodieren Sie Base64 zurück in Text. Unterstützt UTF-8 und Binärdaten.URL Codierungstool
Codieren oder decodieren Sie URL-Komponenten. Verarbeiten Sie Sonderzeichen, Abfragezeichenfolgen und vollständige URLs.Häufig gestellte Fragen
Welche TypeScript-Features generiert dieser Converter?▾
Der Converter generiert TypeScript-Interface-Deklarationen für Objekte mit korrekten Typen für string, number, boolean, null, undefined und Date (ISO-Datumzeichenketten). Verschachtelte Objekte erzeugen separate Interfaces. Arrays erzeugen T[]-Typen. Gemischte Arrays erzeugen Uniontypen (string | number)[]. Eigenschaften, die in der Stichprobe null sind, erhalten T | null. Optionale Eigenschaften (?) werden nicht aus einer einzelnen Stichprobe abgeleitet — verwenden Sie mehrere Stichproben für bessere Inferenz.
Wie werden verschachtelte Objekte behandelt?▾
Jedes verschachtelte Objekt erhält eine eigene benannte Schnittstelle. Beispiel: {"user": {"name": "Alice"}} erzeugt interface User { name: string; } und interface Root { user: User; }. Interfaces werden benannt, indem der Eigenschaftsschlüssel in PascalCase konvertiert wird. Tief verschachtelte Objekte erzeugen eine vollständige Hierarchie von Interfaces. Arrays von Objekten erzeugen eine Schnittstelle für den Elementtyp, auf die als ItemType[] verwiesen wird.
Was ist der Unterschied zwischen interface und type in TypeScript?▾
interface und type sind weitgehend austauschbar für Objektformen. Interfaces unterstützen Declaration Merging (mehrere Deklarationen mit gleichem Namen werden zusammengefasst) und können mit extends erweitert werden. type-Aliase können Uniontypen, Tuples und gemappte Typen ausdrücken, die Interfaces nicht können. Für API-Antwortformen funktionieren beide. Die Konvention ist, interface für Objektformen zu verwenden (Objekte, die Sie instanziieren oder erweitern werden) und type für Aliase, Unions und berechnete Typen.
Wie sollte ich mit API-Antworten umgehen, die sich zwischen Aufrufen unterscheiden?▾
Der Converter leitet Typen aus einer Stichprobe ab. Wenn ein Feld manchmal string und manchmal number bei verschiedenen Aufrufen ist, müssen Sie den Union-Typ manuell hinzufügen: field: string | number. Für nullable Felder, fügen Sie | null hinzu. Für fehlende/optionale Felder, fügen Sie den ? Modifikator hinzu: field?: string. Führen Sie den Converter auf mehreren API-Antworten aus und fügen Sie die Interfaces manuell für produktionsreife Typen zusammen.
Wie verwende ich diese Interfaces in meinem TypeScript-Projekt?▾
Kopieren Sie die generierten Interfaces in eine .ts- oder .d.ts-Datei (z. B. api-types.ts). Importieren Sie sie dort, wo nötig: import type { Root } from "./api-types";. Typisieren Sie Ihre Fetch-Antwort: const data = await response.json() as Root; oder mit zod für Laufzeit-Validierung: const schema = z.object({...}); const data = schema.parse(await response.json()). Für große Projekte erwägen Sie Tools wie quicktype oder openapi-typescript für automatisierte Typ-Generierung aus Schemas.