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

Introduction : Pourquoi JSON et TypeScript forment une paire idéale

Dans le développement web moderne, JSON (JavaScript Object Notation) est devenu un format universel pour l'échange de données entre le client et le serveur, le stockage de configurations et la transmission d'informations dans les API. TypeScript, en tant que surcouche de JavaScript, ajoute à cette flexibilité un puissant système de types, rendant le travail avec JSON non seulement pratique, mais aussi sûr. Dans cet article, nous allons voir comment analyser correctement (convertir une chaîne JSON en objet) et sérialiser (convertir un objet en chaîne JSON) les données en utilisant TypeScript. Ce contenu est destiné aux développeurs débutants qui connaissent déjà les bases de TypeScript, mais qui souhaitent travailler en toute confiance avec JSON.

Ce que vous allez apprendre

\n
• Comment utiliser les méthodes intégrées JSON.parse() et JSON.stringify().
\n
• Comment typer les données lors de l'analyse pour éviter les erreurs.
\n
• Comment gérer les exceptions et vérifier la validité du JSON.
\n
• Des exemples pratiques avec des scénarios réels.
\n

1. Les bases : Les méthodes JSON.parse() et JSON.stringify()

TypeScript hérite de JavaScript deux méthodes globales pour travailler avec JSON. Elles sont disponibles sans importer de bibliothèques supplémentaires.

1.1. Analyse de JSON en objet : JSON.parse()

La méthode JSON.parse() prend une chaîne au format JSON et retourne un objet JavaScript (ou un tableau, un nombre, une chaîne). En TypeScript, nous pouvons spécifier le type attendu du résultat à l'aide de génériques.

// Exemple simple sans typage\nconst jsonString = '{"name": "Alice", "age": 30}';\nconst user = JSON.parse(jsonString);\nconsole.log(user.name); // "Alice"

1.2. Sérialisation d'un objet en JSON : JSON.stringify()

La méthode JSON.stringify() convertit un objet ou une valeur JavaScript en une chaîne JSON. Elle traite automatiquement tous les types primitifs, les tableaux et les objets simples.

const user = {\n  name: "Bob",\n  age: 25,\n  isAdmin: false\n};\nconst jsonString = JSON.stringify(user);\nconsole.log(jsonString); // '{"name":"Bob","age":25,"isAdmin":false}'

2. Typage des données lors de l'analyse JSON en TypeScript

Le principal avantage de TypeScript est la possibilité de définir le type du résultat de l'analyse. Cela protège le code des erreurs lors de la compilation et le rend auto-documenté.

2.1. Utilisation des interfaces et des génériques

Créez une interface décrivant la structure de vos données et transmettez-la à JSON.parse() comme générique :

interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nconst jsonData = '{"id": 1, "name": "Victor", "email": "victor@example.com", "isActive": true}';\nconst user: User = JSON.parse(jsonData);\nconsole.log(user.email); // "victor@example.com"\n// user.id est maintenant strictement de type number

2.2. Gestion des objets imbriqués et des tableaux

Les interfaces fonctionnent parfaitement avec les structures complexes :

interface Address {\n  city: string;\n  zip: string;\n}\n\ninterface Employee {\n  id: number;\n  name: string;\n  address: Address;\n  skills: string[];\n}\n\nconst employeeJson = '{"id": 101, "name": "Hélène", "address": {"city": "Moscou", "zip": "101000"}, "skills": ["TS", "JS", "Python"]}';\nconst employee: Employee = JSON.parse(employeeJson);\nconsole.log(employee.address.city); // "Moscou"

2.3. Que se passe-t-il si le type ne correspond pas ?

Il est important de comprendre : TypeScript vérifie les types uniquement lors de la compilation. Si au moment de l'exécution, un JSON avec une structure différente arrive (par exemple, age est une chaîne au lieu d'un nombre), l'erreur se produira dans le code, mais pas dans JSON.parse(). Pour une sécurité totale, utilisez des validateurs d'exécution (par exemple, Zod ou io-ts), mais pour la plupart des projets d'apprentissage, les interfaces suffisent.

3. Sérialisation : subtilités et transformations personnalisées

La méthode JSON.stringify() peut également être configurée