Arbeiten mit JSON in TypeScript: Parsing und Serialisierung in der Praxis

Einleitung: JSON und TypeScript – das ideale Paar für die Datenverarbeitung

JSON (JavaScript Object Notation) ist ein leichtgewichtiges Datenaustauschformat, das zum De-facto-Standard für die Kommunikation zwischen Client und Server sowie für die Speicherung von Konfigurationen und die Übertragung strukturierter Informationen geworden ist. TypeScript, als streng typisierte Obermenge von JavaScript, bietet leistungsstarke Werkzeuge für eine sichere und vorhersagbare Arbeit mit JSON. In diesem Artikel werden wir praktisch erarbeiten, wie man JSON-Daten in TypeScript richtig parst (einen JSON-String in ein Objekt umwandelt) und serialisiert (ein Objekt in einen JSON-String umwandelt), dabei typische Fehler vermeidet und die Möglichkeiten des Typsystems nutzt.

Grundlagen: JSON.parse() und JSON.stringify() in TypeScript

TypeScript erbt vollständig die integrierten JavaScript-Methoden für die Arbeit mit JSON: JSON.parse() und JSON.stringify(). Ihre Verwendung in einer streng typisierten Umgebung erfordert jedoch einen besonderen Ansatz.

JSON.parse() – vom String zum Objekt

Die Methode JSON.parse() nimmt einen JSON-String entgegen und gibt ein Objekt zurück. In TypeScript hat das Ergebnis standardmäßig den Typ any, was uns aller Vorteile der Typisierung beraubt. Betrachten wir ein Beispiel:

const jsonString = '{"name": "TypeScript", "version": 5.3}';const parsed: any = JSON.parse(jsonString);console.log(parsed.name); // Funktioniert, aber keine Autovervollständigung und Typprüfung

Um ein typisiertes Ergebnis zu erhalten, verwenden Sie eine Typzusicherung (type assertion):

interface Language {    name: string;    version: number;}

const jsonString = '{"name": "TypeScript", "version": 5.3}';const parsed = JSON.parse(jsonString) as Language;console.log(parsed.name.toUpperCase()); // Autovervollständigung funktioniert!

JSON.stringify() – vom Objekt zum String

JSON.stringify() serialisiert ein Objekt in einen JSON-String. TypeScript prüft, ob das übergebene Objekt für die Serialisierung gültig ist (keine Funktionen, undefined, Symbol usw. enthält).

interface User {    id: number;    name: string;    isActive: boolean;}

const user: User = { id: 1, name: "Alice", isActive: true };const jsonString = JSON.stringify(user);console.log(jsonString); // '{"id":1,"name":"Alice","isActive":true}'

Fortgeschrittene Techniken: Typisierung und Fehlerbehandlung

In der Praxis ist die Arbeit mit JSON selten perfekt. Daten können vom Server in einem unerwarteten Format kommen, zusätzliche Felder enthalten oder erforderliche Felder fehlen. Betrachten wir, wie TypeScript bei der Bewältigung dieser Probleme hilft.

Erstellung einer generischen Funktion für sicheres Parsing

Schreiben wir eine universelle Funktion, die einen JSON-String entgegennimmt und ein typisiertes Ergebnis mit Fehlerbehandlung zurückgibt:

function safeParse<T>(json: string): T | null {    try {        return JSON.parse(json) as T;    } catch (error) {        console.error("Fehler beim JSON-Parsing:", error);        return null;    }}

// Verwendunginterface Product {    id: number;    title: string;    price: number;}

const rawData = '{"id": 101, "title": "Laptop", "price": 999.99}';const product = safeParse<Product>(rawData);if (product) {    console.log(product.title); // "Laptop"}

Datenvalidierung mit benutzerdefinierten Typwächtern

Selbst nach einer Typzusicherung as T prüft TypeScript nicht, ob die Daten tatsächlich dem Interface entsprechen. Verwenden Sie für die Laufzeitvalidierung Type Guards:

function isProduct(obj: any): obj is Product {    return (        typeof obj === 'object' &&        obj !== null &&        typeof obj.id === 'number' &&        typeof obj.title === 'string' &&        typeof obj.price === 'number'    );}

const rawData = '{"id": "abc", "title": "Phone", "price": 599}';const parsed = JSON.parse(rawData);if (isProd