Arbeiten mit JSON in TypeScript: Parsen und Serialisieren von Daten

Einführung in die Arbeit mit JSON in TypeScript

JSON (JavaScript Object Notation) bleibt eines der beliebtesten Formate für den Datenaustausch zwischen Client und Server. In TypeScript, einer streng typisierten Erweiterung von JavaScript, erfordert die Arbeit mit JSON besondere Aufmerksamkeit für Datentypen. In diesem Artikel werden wir im Detail besprechen, wie man JSON in TypeScript richtig parst und serialisiert, typische Fehler vermeidet und die Vorteile der statischen Typisierung nutzt.

TypeScript bietet alle integrierten JavaScript-Methoden für die Arbeit mit JSON, fügt ihnen jedoch ein leistungsstarkes Typsystem hinzu. Dies ermöglicht die Erstellung zuverlässigerer und vorhersagbarerer Code. Wir werden sowohl grundlegende Operationen als auch fortgeschrittene Techniken behandeln, einschließlich benutzerdefinierter Validierungsfunktionen und der Arbeit mit Generics.

Grundlagen des JSON-Parsings: JSON.parse()

Die Methode JSON.parse() wandelt einen JSON-String in ein JavaScript-Objekt um. In TypeScript ist es wichtig, das Ergebnis korrekt zu typisieren, damit der Compiler die Korrektheit der Zugriffe auf Objekteigenschaften überprüfen kann.

Basissyntax und Typisierung

Betrachten wir ein einfaches Beispiel:

const jsonString = '{"name": "Anna", "age": 30, "city": "Moskau"}';const user = JSON.parse(jsonString);console.log(user.name); // Anna

Das Problem ist, dass TypeScript die Struktur des Objekts user nicht kennt. Die Variable hat den Typ any, was uns aller Vorteile der Typisierung beraubt. Die richtige Lösung ist, den Typ explizit anzugeben:

interface User {  name: string;  age: number;  city: string;}

const jsonString = '{"name": "Anna", "age": 30, "city": "Moskau"}';const user: User = JSON.parse(jsonString); // Fehler!// Type 'any' is not assignable to type 'User'.

TypeScript gibt einen Fehler aus, weil JSON.parse() any zurückgibt und wir versuchen, es einer typisierten Variable zuzuweisen. Verwenden Sie eine Typumwandlung:

const user = JSON.parse(jsonString) as User;console.log(user.name.toUpperCase()); // ANNA

Sicheres Parsen mit Typprüfung

Die Typumwandlung mit as ist eine schnelle Lösung, garantiert aber nicht, dass die Daten tatsächlich der erwarteten Struktur entsprechen. Für Produktionscode wird empfohlen, Validierungsfunktionen zu erstellen:

function parseUser(data: string): User | null {  try {    const parsed = JSON.parse(data);    if (typeof parsed === 'object' && parsed !== null &&        typeof parsed.name === 'string' &&        typeof parsed.age === 'number' &&        typeof parsed.city === 'string') {      return parsed as User;    }    return null;  } catch {    return null;  }}

const user = parseUser('{"name": "Ivan", "age": 25, "city": "SPb"}');if (user) {  console.log(`Benutzer: ${user.name}, Alter: ${user.age}`);}

Dieser Ansatz verhindert Laufzeitfehler, falls der Server ungültige Daten zurückgibt.

Serialisierung: JSON.stringify()

Die Methode JSON.stringify() wandelt ein JavaScript-Objekt in einen JSON-String um. In TypeScript funktioniert diese Methode genauso wie in JavaScript, jedoch unter Berücksichtigung der Typen.

Einfache Serialisierung

const user: User = {  name: 'Maria',  age: 28,  city: 'Kasan'};

const jsonString = JSON.stringify(user);console.log(jsonString); // {"name":"Maria","age":28,"city":"Kasan"}

Formatierungsparameter

Verwenden Sie für eine lesbare Ausgabe die Parameter replacer und space:

const user = {  name: 'Alexei',  age: 35,  city: 'Nowosibirsk',  password: 'secret123'};

// Feld password ausschließenconst jsonString = JSON.stringify(user, ['name', 'age', 'city'], 2);console.log(jsonString);/* Ausgabe:{  "name": "Alexei",  "age": 35,  "city": "Nowosibirsk"}*/

Der Parameter repla