Traitement JSON en TypeScript : typage, validation et parsing

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

JSON (JavaScript Object Notation) reste le format d'échange de données principal dans le développement web. TypeScript ajoute au travail avec JSON un puissant système de types qui permet d'éviter de nombreuses erreurs dès la phase de compilation. Dans cet article, nous allons aborder tous les aspects du traitement JSON en TypeScript : du simple parsing à la création de validateurs fortement typés.

Parsing et sérialisation de base

Commençons par les opérations fondamentales. Les méthodes intégrées JSON.parse() et JSON.stringify() fonctionnent en TypeScript comme en JavaScript, mais avec des différences importantes en matière de typage.

// Parsing simple — le résultat sera anyconst data: any = JSON.parse('{"name": "Alice", "age": 30}');

// Mieux vaut spécifier le type directementinterface User {  name: string;  age: number;}

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

Il est important de comprendre : as User est une assertion de type (type assertion), pas une vérification. Si le JSON contient des données invalides, TypeScript ne vous avertira pas de l'erreur. Pour un travail sécurisé, une validation est nécessaire.

Parsing sécurisé avec les Generics

Créons une fonction universelle pour le parsing sécurisé du JSON avec vérification de la structure :

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;  }}

// Définissons le type et la fonction de validationinterface 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(`Produit : ${product.title}, prix : ${product.price}`);} else {  console.log('Format JSON invalide');}

Travail avec les structures imbriquées et les tableaux

Les données JSON réelles contiennent souvent des objets imbriqués et des tableaux. Examinons un exemple avec le typage d'une structure complexe :

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

// Parse et vérifie immédiatement la structurefunction parseOrder(json: string): Order {  const raw = JSON.parse(json);    // Vérification simple  if (!raw.id || !raw.customer || !Array.isArray(raw.items)) {    throw new Error('Structure de commande invalide');  }    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(`Commande ${order.id} d'un montant de ${order.total}`);} catch (e) {  console.error('Erreur de parsing :', e.message);}

Sérialisation avec des convertisseurs personnalisés

Il est parfois nécessaire de contrôler la manière dont les objets sont convertis en JSON. TypeScript permet de créer des sérialiseurs personnalisés :

interface Config {  host: string;  port: number;  timeout: number; // en millisecondes}

function serializeConfig(config: Config): string {  return JSON.stringify({    host: config.host,    port: config.port,    timeout: config.timeout / 1000 // conversion en secondes  }, null, 2); // formatage avec indentation}

const myConfig: Config = {  host: 'localhost'