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

Einleitung: Warum JSON und TypeScript ein ideales Paar sind

JSON (JavaScript Object Notation) ist ein leichtgewichtiges Datenaustauschformat, das zum De-facto-Standard für Webanwendungen geworden ist. TypeScript wiederum fügt JavaScript statische Typisierung hinzu, was die Arbeit mit Daten sicherer und vorhersagbarer macht. Für angehende Entwickler ist das Verständnis, wie man JSON in TypeScript parst (einen String in ein Objekt umwandelt) und serialisiert (ein Objekt in einen String umwandelt), eine grundlegende Fähigkeit.

In diesem Artikel werden wir alle Aspekte der Arbeit mit JSON in TypeScript behandeln: von grundlegenden Operationen bis hin zu fortgeschrittenen Techniken mit Typisierung. Sie erfahren, wie Sie typische Fehler vermeiden und sauberen, wartbaren Code schreiben.

Grundlagen des JSON-Parsings in TypeScript

JSON-Parsing ist der Prozess der Umwandlung eines JSON-Strings in ein TypeScript-Objekt. Das wichtigste Werkzeug dafür ist die globale Funktion JSON.parse(). Allerdings gibt es in TypeScript Nuancen in Bezug auf die Typisierung.

Basis-Parsing eines JSON-Strings

Betrachten wir ein einfaches Beispiel: Wir haben einen JSON-String, der einen Benutzer darstellt.

const jsonString = '{"name": "Anna", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString);console.log(user.name); // "Anna"console.log(user.age);  // 28

Das Problem ist, dass TypeScript nicht weiß, welche Struktur das Objekt user hat. Standardmäßig gibt JSON.parse() den Typ any zurück, was die Vorteile der statischen Typisierung zunichte macht.

Typisierung des Parsing-Ergebnisses

Um dies zu beheben, können wir den Rückgabetyp explizit angeben. Der einfachste Weg ist die Verwendung einer Typzusicherung (type assertion).

interface User {    name: string;    age: number;    isStudent: boolean;}

const jsonString = '{"name": "Anna", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString) as User;console.log(user.name); // TypeScript weiß, dass name ein string ist

Jetzt versteht TypeScript die Struktur des Objekts und kann die Typen der Eigenschaften beim Zugriff überprüfen.

Serialisierung von Objekten in JSON in TypeScript

Serialisierung ist der umgekehrte Prozess: die Umwandlung eines TypeScript-Objekts in einen JSON-String. Dafür wird die Funktion JSON.stringify() verwendet.

Basisbeispiel der Serialisierung

interface Product {    id: number;    title: string;    price: number;    inStock: boolean;}

const product: Product = {    id: 101,    title: "Laptop",    price: 54999.99,    inStock: true};

const jsonString = JSON.stringify(product);console.log(jsonString);// {"id":101,"title":"Laptop","price":54999.99,"inStock":true}

Die Funktion JSON.stringify() wandelt das Objekt automatisch in einen JSON-String um. Es ist wichtig zu beachten, dass nicht alle Werte serialisiert werden können: Funktionen, undefined, Symbol – sie werden ausgelassen oder durch null ersetzt.

Anpassung der Serialisierung mit replacer

Manchmal muss man kontrollieren, welche Felder in den endgültigen String aufgenommen werden. Dafür akzeptiert JSON.stringify() ein zweites Argument – eine replacer-Funktion oder ein Array von Schlüsseln.

const product = {    id: 101,    title: "Laptop",    price: 54999.99,    discount: 10,    secretCode: "SECRET123"};

// Geheime Daten ausschließenconst safeJson = JSON.stringify(product, (key, value) => {    if (key === 'secretCode') {        return undefined; // Dieses Feld auslassen    }    return value;});console.log(safeJson);// {"id":101,"title":"Laptop","price":54999.99,"discount":10}

Fortgeschrittene Techniken: Arbeiten mit verschachtelten Objekten und Arrays

In realen Anwendungen ist JSON selten flach. Häufig kommen verschachtelte Objekte, Arrays und komplexe Datenstrukturen vor. TypeScript hilft, diese Komplexität mit Hilfe von Interfaces zu bewältigen.