Travailler avec JSON en TypeScript : analyse et sérialisation des données

Introduction au travail avec JSON en TypeScript

JSON (JavaScript Object Notation) reste l'un des formats les plus populaires pour l'échange de données entre le client et le serveur. En TypeScript, qui est une surcouche fortement typée de JavaScript, le travail avec JSON nécessite une attention particulière aux types de données. Dans cet article, nous allons détailler comment analyser et sérialiser correctement JSON en TypeScript, en évitant les erreurs typiques et en utilisant les avantages du typage statique.

TypeScript fournit toutes les méthodes JavaScript intégrées pour travailler avec JSON, mais y ajoute un puissant système de types. Cela permet de créer un code plus fiable et prévisible. Nous examinerons à la fois les opérations de base et les techniques avancées, y compris les fonctions de validation personnalisées et le travail avec les génériques.

Les bases de l'analyse JSON : JSON.parse()

La méthode JSON.parse() convertit une chaîne JSON en un objet JavaScript. En TypeScript, il est important de typer correctement le résultat afin que le compilateur puisse vérifier la validité des accès aux propriétés de l'objet.

Syntaxe de base et typage

Prenons un exemple simple :

const jsonString = '{"name": "Anna", "age": 30, "city": "Moscou"}';const user = JSON.parse(jsonString);console.log(user.name); // Anna

Le problème est que TypeScript ne connaît pas la structure de l'objet user. La variable a le type any, ce qui nous prive de tous les avantages du typage. La bonne solution est de spécifier explicitement le type :

interface User {  name: string;  age: number;  city: string;}

const jsonString = '{"name": "Anna", "age": 30, "city": "Moscou"}';const user: User = JSON.parse(jsonString); // Erreur !// Type 'any' is not assignable to type 'User'.

TypeScript générera une erreur car JSON.parse() retourne any, et nous essayons de l'assigner à une variable typée. Utilisez le cast de type :

const user = JSON.parse(jsonString) as User;console.log(user.name.toUpperCase()); // ANNA

Analyse sécurisée avec vérification de type

Le cast de type as est une solution rapide, mais elle ne garantit pas que les données correspondent réellement à la structure attendue. Pour le code de production, il est recommandé de créer des fonctions de validation :

function parseUser(data: string): User | null {  try {    const parsed = JSON.parse(data);    if (typeof parsed === 'object' && parsed !== null &&        typeof parsed.name === 'string' &&        typeof parsed.age === 'number' &&        typeof parsed.city === 'string') {      return parsed as User;    }    return null;  } catch {    return null;  }}

const user = parseUser('{"name": "Ivan", "age": 25, "city": "SPb"}');if (user) {  console.log(`Utilisateur : ${user.name}, âge : ${user.age}`);}

Cette approche prévient les erreurs d'exécution si le serveur renvoie des données incorrectes.

Sérialisation : JSON.stringify()

La méthode JSON.stringify() convertit un objet JavaScript en une chaîne JSON. En TypeScript, cette méthode fonctionne comme en JavaScript, mais en tenant compte des types.

Sérialisation simple

const user: User = {  name: 'Maria',  age: 28,  city: 'Kazan'};

const jsonString = JSON.stringify(user);console.log(jsonString); // {"name":"Maria","age":28,"city":"Kazan"}

Paramètres de formatage

Pour une sortie lisible, utilisez les paramètres replacer et space :

const user = {  name: 'Alexei',  age: 35,  city: 'Novossibirsk',  password: 'secret123'};

// Exclure le champ passwordconst jsonString = JSON.stringify(user, ['name', 'age', 'city'], 2);console.log(jsonString);/* Sortie :{  "name": "Alexei",  "age": 35,  "city": "Novossibirsk"}*/

Le paramètre repla