JSON-Verarbeitung in TypeScript: Vollständiger Leitfaden mit Beispielen

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

JSON (JavaScript Object Notation) bleibt das wichtigste Datenübertragungsformat in der Webentwicklung. TypeScript, als streng typisierte Obermenge von JavaScript, bietet leistungsstarke Werkzeuge für die sichere und effiziente Arbeit mit JSON. In diesem Artikel behandeln wir alle Aspekte der JSON-Verarbeitung in TypeScript: vom einfachen Parsen bis zur komplexen Validierung mit Generics und Drittanbieter-Bibliotheken.

1. Grundlegende Operationen: Parsen und Serialisierung

TypeScript erbt vollständig die integrierten JavaScript-Methoden für die Arbeit mit JSON: JSON.parse() und JSON.stringify(). Ihre Verwendung in TypeScript erfordert jedoch besondere Aufmerksamkeit bei den Typen.

Parsen eines JSON-Strings

// Einfaches Parsen – Ergebnis ist anyconst rawData = JSON.parse('{"name": "Alice", "age": 30}');// rawData hat den Typ any – alle Vorteile von TypeScript gehen verloren

// Richtiger Ansatz: Erwarteten Typ über Generic angebeninterface User {  name: string;  age: number;}

const user: User = JSON.parse('{"name": "Alice", "age": 30}');// user ist jetzt typisiert, aber TypeScript prüft die Übereinstimmung nicht zur Laufzeit

Wichtig: JSON.parse() prüft nicht, ob der übergebene String dem angegebenen Interface entspricht. Dies kann zu Laufzeitfehlern führen. Verwenden Sie für eine zuverlässige Validierung zusätzliche Werkzeuge.

Serialisierung von Objekten in JSON

const user: User = { name: "Bob", age: 25 };const jsonString = JSON.stringify(user);// Ergebnis: '{"name":"Bob","age":25}'

// Benutzerdefinierte Serialisierung mit replacerconst filteredJson = JSON.stringify(user, ['name']);// Ergebnis: '{"name":"Bob"}'

// Formatierung mit Einrückungenconst prettyJson = JSON.stringify(user, null, 2);/* Ergebnis:{  "name": "Bob",  "age": 25}*/

2. Typisierung von JSON-Daten: Interfaces und Typen

Die korrekte Typisierung ist der entscheidende Vorteil von TypeScript bei der Arbeit mit JSON. Betrachten wir die wichtigsten Ansätze.

Interfaces für Datenstrukturen

interface ApiResponse<T> {  status: 'success' | 'error';  data: T;  message?: string;  timestamp: number;}

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

// Verwendung von Generics zur Typisierung einer API-Antworttype ProductResponse = ApiResponse<Product>;

const response: ProductResponse = {  status: 'success',  data: {    id: 'prod-123',    title: 'Wireless Mouse',    price: 29.99,    tags: ['electronics', 'accessories'],    inStock: true  },  timestamp: Date.now()};

Typen für dynamische JSON-Strukturen

// Für Objekte mit unbekannten Schlüsselntype DynamicObject = Record<string, unknown>;

// Für streng typisierte Wörterbücherinterface Config {  [key: string]: string | number | boolean;}

// Union-Typen für polymorphe JSON-Datentype Shape =   | { kind: 'circle'; radius: number }  | { kind: 'rectangle'; width: number; height: number }  | { kind: 'triangle'; base: number; height: number };

function calculateArea(shape: Shape): number {  switch (shape.kind) {    case 'circle': return Math.PI * shape.radius ** 2;    case 'rectangle': return shape.width * shape.height;    case 'triangle': return (shape.base * shape.height) / 2;  }}

3. Validierung von JSON-Daten: Laufzeitprüfungen

TypeScript prüft Typen nur zur Kompilierungszeit. Für die Laufzeitvalidierung von JSON-Daten (z. B. von einer externen API) verwenden Sie spezialisierte Bibliotheken.

Verwendung von Zod für deklarative Validierung

import { z } from 'zod';

// Schema definierenconst UserSchema = z.object({  name: z.string().min(2).max(50),  age: z.number().int().positive().max(120),  email: z