Travailler avec JSON en TypeScript : analyse et sérialisation pour débutants

Introduction : pourquoi JSON et TypeScript sont un duo idéal

JSON (JavaScript Object Notation) est un format léger d'échange de données devenu le standard de facto pour les applications web. TypeScript, quant à lui, ajoute le typage statique à JavaScript, rendant le travail avec les données plus sûr et plus prévisible. Pour les développeurs débutants, comprendre comment analyser (convertir une chaîne en objet) et sérialiser (convertir un objet en chaîne) du JSON en TypeScript est une compétence fondamentale.

Dans cet article, nous aborderons tous les aspects du travail avec JSON en TypeScript : des opérations de base aux techniques avancées avec typage. Vous apprendrez à éviter les erreurs courantes et à écrire un code propre et maintenable.

Les bases de l'analyse JSON en TypeScript

L'analyse JSON est le processus de conversion d'une chaîne au format JSON en un objet TypeScript. L'outil principal pour cela est la fonction globale JSON.parse(). Cependant, TypeScript a ses propres nuances liées au typage.

Analyse de base d'une chaîne JSON

Prenons un exemple simple : nous avons une chaîne JSON représentant un utilisateur.

const jsonString = '{"name": "Анна", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString);console.log(user.name); // "Анна"console.log(user.age);  // 28

Le problème est que TypeScript ne connaît pas la structure de l'objet user. Par défaut, JSON.parse() renvoie le type any, ce qui annule les avantages du typage statique.

Typage du résultat de l'analyse

Pour corriger cela, nous pouvons spécifier explicitement le type de la valeur retournée. La méthode la plus simple consiste à utiliser une assertion de type (type assertion).

interface User {    name: string;    age: number;    isStudent: boolean;}

const jsonString = '{"name": "Анна", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString) as User;console.log(user.name); // TypeScript sait que name est un string

Désormais, TypeScript comprend la structure de l'objet et peut vérifier les types des propriétés lors de leur accès.

Sérialisation d'objets en JSON en TypeScript

La sérialisation est le processus inverse : conversion d'un objet TypeScript en une chaîne JSON. Pour cela, on utilise la fonction JSON.stringify().

Exemple de base de sérialisation

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

const product: Product = {    id: 101,    title: "Ноутбук",    price: 54999.99,    inStock: true};

const jsonString = JSON.stringify(product);console.log(jsonString);// {"id":101,"title":"Ноутбук","price":54999.99,"inStock":true}

La fonction JSON.stringify() convertit automatiquement l'objet en une chaîne JSON. Il est important de se rappeler que toutes les valeurs ne peuvent pas être sérialisées : les fonctions, undefined, Symbol — elles seront ignorées ou remplacées par null.

Personnalisation de la sérialisation avec replacer

Parfois, il est nécessaire de contrôler quels champs seront inclus dans la chaîne finale. Pour cela, JSON.stringify() accepte un deuxième argument : une fonction replacer ou un tableau de clés.

const product = {    id: 101,    title: "Ноутбук",    price: 54999.99,    discount: 10,    secretCode: "SECRET123"};

// Exclusion des données secrètesconst safeJson = JSON.stringify(product, (key, value) => {    if (key === 'secretCode') {        return undefined; // Ignorer ce champ    }    return value;});console.log(safeJson);// {"id":101,"title":"Ноутбук","price":54999.99,"discount":10}

Techniques avancées : travail avec des objets imbriqués et des tableaux

Dans les applications réelles, le JSON est rarement plat. On rencontre souvent des objets imbriqués, des tableaux et des structures de données complexes. TypeScript aide à gérer cette complexité grâce aux interfaces.