JSON-Verarbeitung in TypeScript: Typisierung, Validierung und Parsing

JSON-Verarbeitung in TypeScript: Von grundlegenden Operationen bis zur fortgeschrittenen Typisierung

JSON (JavaScript Object Notation) bleibt das wichtigste Datenformat im Webentwicklung. TypeScript fügt der Arbeit mit JSON ein leistungsstarkes Typsystem hinzu, das viele Fehler bereits zur Kompilierzeit vermeidet. In diesem Artikel behandeln wir alle Aspekte der JSON-Verarbeitung in TypeScript: vom einfachen Parsing bis zur Erstellung streng typisierter Validatoren.

Basis-Parsing und Serialisierung

Beginnen wir mit den grundlegenden Operationen. Die eingebauten Methoden JSON.parse() und JSON.stringify() funktionieren in TypeScript genauso wie in JavaScript, jedoch mit wichtigen Unterschieden bei der Typisierung.

// Einfaches Parsing – das Ergebnis ist anyconst data: any = JSON.parse('{"name": "Alice", "age": 30}');

// Besser direkt den Typ angebeninterface User {  name: string;  age: number;}

const user: User = JSON.parse('{"name": "Alice", "age": 30}') as User;console.log(user.name); // Alice

Wichtig zu verstehen: as User ist eine Typbehauptung (type assertion), keine Überprüfung. Wenn das JSON ungültige Daten enthält, warnt TypeScript Sie nicht vor dem Fehler. Für sicheres Arbeiten ist eine Validierung erforderlich.

Sicheres Parsing mit Generics

Erstellen wir eine universelle Funktion für sicheres JSON-Parsing mit Strukturprüfung:

function safeParse<T>(json: string, validator: (data: unknown) => data is T): T | null {  try {    const parsed: unknown = JSON.parse(json);    if (validator(parsed)) {      return parsed;    }    return null;  } catch {    return null;  }}

// Typ und Validierungsfunktion definiereninterface Product {  id: number;  title: string;  price: number;}

function isProduct(data: unknown): data is Product {  if (typeof data !== 'object' || data === null) return false;  const obj = data as Record<string, unknown>;  return (    typeof obj.id === 'number' &&    typeof obj.title === 'string' &&    typeof obj.price === 'number'  );}

const jsonString = '{"id": 1, "title": "Book", "price": 19.99}';const product = safeParse<Product>(jsonString, isProduct);if (product) {  console.log(`Produkt: ${product.title}, Preis: ${product.price}`);} else {  console.log('Ungültiges JSON-Format');}

Arbeiten mit verschachtelten Strukturen und Arrays

Reale JSON-Daten enthalten oft verschachtelte Objekte und Arrays. Betrachten wir ein Beispiel mit Typisierung einer komplexen Struktur:

interface Order {  id: string;  customer: {    name: string;    email: string;  };  items: Array<{    productId: number;    quantity: number;  }>;  total: number;}

// Parsen und sofortige Strukturprüfungfunction parseOrder(json: string): Order {  const raw = JSON.parse(json);    // Einfachste Prüfung  if (!raw.id || !raw.customer || !Array.isArray(raw.items)) {    throw new Error('Ungültige Bestellstruktur');  }    return raw as Order;}

const orderJson = `{  "id": "ORD-001",  "customer": {"name": "Bob", "email": "bob@example.com"},  "items": [{"productId": 42, "quantity": 2}],  "total": 59.98}`;

try {  const order = parseOrder(orderJson);  console.log(`Bestellung ${order.id} im Wert von ${order.total}`);} catch (e) {  console.error('Parsing-Fehler:', e.message);}

Serialisierung mit benutzerdefinierten Konvertern

Manchmal muss man steuern, wie Objekte in JSON umgewandelt werden. TypeScript ermöglicht die Erstellung benutzerdefinierter Serialisierer:

interface Config {  host: string;  port: number;  timeout: number; // in Millisekunden}

function serializeConfig(config: Config): string {  return JSON.stringify({    host: config.host,    port: config.port,    timeout: config.timeout / 1000 // in Sekunden umwandeln  }, null, 2); // Formatierung mit Einrückungen}

const myConfig: Config = {  host: 'localhost'