Arbeiten mit JSON in TypeScript: Parsing und Serialisierung für Anfänger

Einleitung: Warum JSON und TypeScript ein ideales Paar sind

In der modernen Webentwicklung ist JSON (JavaScript Object Notation) zum universellen Format für den Datenaustausch zwischen Client und Server, die Speicherung von Konfigurationen und die Übertragung von Informationen in APIs geworden. TypeScript, als Erweiterung von JavaScript, fügt dieser Flexibilität ein leistungsstarkes Typsystem hinzu und macht die Arbeit mit JSON nicht nur bequem, sondern auch sicher. In diesem Artikel werden wir uns ansehen, wie man Daten mit TypeScript richtig parst (einen JSON-String in ein Objekt umwandelt) und serialisiert (ein Objekt in einen JSON-String umwandelt). Das Material richtet sich an Anfänger, die bereits die Grundlagen von TypeScript kennen, aber sicher mit JSON arbeiten möchten.

Was Sie lernen werden

\n
• Wie man die integrierten Methoden JSON.parse() und JSON.stringify() verwendet.
\n
• Wie man Daten beim Parsen typisiert, um Fehler zu vermeiden.
\n
• Wie man Ausnahmen behandelt und die Korrektheit von JSON überprüft.
\n
• Praktische Beispiele mit realen Szenarien.
\n

1. Grundlagen: Die Methoden JSON.parse() und JSON.stringify()

TypeScript erbt von JavaScript zwei globale Methoden für die Arbeit mit JSON. Sie sind ohne Import zusätzlicher Bibliotheken verfügbar.

1.1. JSON in ein Objekt parsen: JSON.parse()

Die Methode JSON.parse() nimmt einen String im JSON-Format entgegen und gibt ein JavaScript-Objekt (oder ein Array, eine Zahl, einen String) zurück. In TypeScript können wir den erwarteten Typ des Ergebnisses mit Generics angeben.

// Einfaches Beispiel ohne Typisierung\nconst jsonString = '{"name": "Alisa", "age": 30}';\nconst user = JSON.parse(jsonString);\nconsole.log(user.name); // "Alisa"

1.2. Objekt in JSON serialisieren: JSON.stringify()

Die Methode JSON.stringify() wandelt ein JavaScript-Objekt oder einen Wert in einen JSON-String um. Sie verarbeitet automatisch alle primitiven Typen, Arrays und einfache Objekte.

const user = {\n  name: "Bob",\n  age: 25,\n  isAdmin: false\n};\nconst jsonString = JSON.stringify(user);\nconsole.log(jsonString); // '{"name":"Bob","age":25,"isAdmin":false}'

2. Typisierung von Daten beim JSON-Parsing in TypeScript

Der Hauptvorteil von TypeScript ist die Möglichkeit, den Typ des Parsing-Ergebnisses festzulegen. Dies schützt den Code vor Fehlern während der Kompilierung und macht ihn selbstdokumentierend.

2.1. Verwendung von Interfaces und Generics

Erstellen Sie ein Interface, das die Struktur Ihrer Daten beschreibt, und übergeben Sie es als Generic an JSON.parse():

interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nconst jsonData = '{"id": 1, "name": "Viktor", "email": "victor@example.com", "isActive": true}';\nconst user: User = JSON.parse(jsonData);\nconsole.log(user.email); // "victor@example.com"\n// user.id ist jetzt streng vom Typ number

2.2. Umgang mit verschachtelten Objekten und Arrays

Interfaces funktionieren hervorragend mit komplexen Strukturen:

interface Address {\n  city: string;\n  zip: string;\n}\n\ninterface Employee {\n  id: number;\n  name: string;\n  address: Address;\n  skills: string[];\n}\n\nconst employeeJson = '{"id": 101, "name": "Elena", "address": {"city": "Moskau", "zip": "101000"}, "skills": ["TS", "JS", "Python"]}';\nconst employee: Employee = JSON.parse(employeeJson);\nconsole.log(employee.address.city); // "Moskau"

2.3. Was passiert, wenn der Typ nicht übereinstimmt?

Es ist wichtig zu verstehen: TypeScript überprüft Typen nur zur Kompilierungszeit. Wenn zur Laufzeit ein JSON mit einer anderen Struktur ankommt (z.B. age ein String statt einer Zahl ist), tritt der Fehler im Code auf, aber nicht in JSON.parse(). Für vollständige Sicherheit verwenden Sie Laufzeit-Validatoren (z.B. Zod oder io-ts), aber für die meisten Lernprojekte reichen Interfaces aus.

3. Serialisierung: Feinheiten und benutzerdefinierte Transformationen

Die Methode JSON.stringify() kann ebenfalls angepasst werden