Traitement JSON en TypeScript : guide complet avec exemples

Traitement JSON en TypeScript : des opérations de base au typage avancé

JSON (JavaScript Object Notation) reste le format principal d'échange de données dans le développement web. TypeScript, en tant que sur-ensemble strictement typé de JavaScript, offre des outils puissants pour travailler avec JSON de manière sécurisée et efficace. Dans cet article, nous aborderons tous les aspects du traitement JSON en TypeScript : du simple parsing à la validation complexe avec des génériques et des bibliothèques tierces.

1. Opérations de base : parsing et sérialisation

TypeScript hérite entièrement des méthodes intégrées de JavaScript pour travailler avec JSON : JSON.parse() et JSON.stringify(). Cependant, leur utilisation en TypeScript nécessite une attention particulière aux types.

Parsing d'une chaîne JSON

// Parsing simple — résultat anyconst rawData = JSON.parse('{"name": "Alice", "age": 30}');// rawData a le type any — on perd tous les avantages de TypeScript

// Approche correcte : spécifier le type attendu via un génériqueinterface User {  name: string;  age: number;}

const user: User = JSON.parse('{"name": "Alice", "age": 30}');// user est maintenant typé, mais TypeScript ne vérifie pas la conformité à l'exécution

Important : JSON.parse() ne vérifie pas si la chaîne transmise correspond à l'interface spécifiée. Cela peut entraîner des erreurs à l'exécution. Pour une validation fiable, utilisez des outils supplémentaires.

Sérialisation d'objets en JSON

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

// Sérialisation personnalisée avec replacerconst filteredJson = JSON.stringify(user, ['name']);// Résultat : '{"name":"Bob"}'

// Formatage avec indentationconst prettyJson = JSON.stringify(user, null, 2);/* Résultat :{  "name": "Bob",  "age": 25}*/

2. Typage des données JSON : interfaces et types

Un typage correct est l'avantage clé de TypeScript pour travailler avec JSON. Examinons les approches principales.

Interfaces pour les structures de données

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

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

// Utilisation d'un générique pour typer une réponse APItype ProductResponse = ApiResponse<Product>;

const response: ProductResponse = {  status: 'success',  data: {    id: 'prod-123',    title: 'Souris sans fil',    price: 29.99,    tags: ['électronique', 'accessoires'],    inStock: true  },  timestamp: Date.now()};

Types pour les structures JSON dynamiques

// Pour les objets avec des clés inconnuestype DynamicObject = Record<string, unknown>;

// Pour les dictionnaires strictement typésinterface Config {  [key: string]: string | number | boolean;}

// Types Union pour JSON polymorphestype 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. Validation des données JSON : vérifications à l'exécution

TypeScript ne vérifie les types qu'à la compilation. Pour la validation à l'exécution des données JSON (par exemple, provenant d'une API externe), utilisez des bibliothèques spécialisées.

Utilisation de Zod pour une validation déclarative

import { z } from 'zod';

// Définir un schémaconst UserSchema = z.object({  name: z.string().min(2).max(50),  age: z.number().int().positive().max(120),  email: z