Trabajo con JSON en TypeScript: análisis y serialización para principiantes

Introducción: Por qué JSON y TypeScript son la pareja ideal

En el desarrollo web moderno, JSON (JavaScript Object Notation) se ha convertido en un formato universal para el intercambio de datos entre cliente y servidor, almacenamiento de configuraciones y transmisión de información en APIs. TypeScript, como una extensión de JavaScript, añade a esta flexibilidad un potente sistema de tipos, haciendo que trabajar con JSON no solo sea conveniente, sino también seguro. En este artículo, analizaremos cómo analizar (convertir una cadena JSON en un objeto) y serializar (convertir un objeto en una cadena JSON) datos correctamente usando TypeScript. El material está dirigido a desarrolladores principiantes que ya están familiarizados con los fundamentos de TypeScript, pero que desean trabajar con JSON con confianza.

Qué aprenderás

\n
• Cómo usar los métodos integrados JSON.parse() y JSON.stringify().
\n
• Cómo tipificar datos al analizar para prevenir errores.
\n
• Cómo manejar excepciones y verificar la validez del JSON.
\n
• Ejemplos prácticos con escenarios reales.
\n

1. Fundamentos: Métodos JSON.parse() y JSON.stringify()

TypeScript hereda de JavaScript dos métodos globales para trabajar con JSON. Están disponibles sin importar bibliotecas adicionales.

1.1. Análisis de JSON a objeto: JSON.parse()

El método JSON.parse() toma una cadena en formato JSON y devuelve un objeto de JavaScript (o un arreglo, número, cadena). En TypeScript, podemos especificar el tipo esperado del resultado usando genéricos.

// Ejemplo simple sin tipificación\nconst jsonString = '{"name": "Alicia", "age": 30}';\nconst user = JSON.parse(jsonString);\nconsole.log(user.name); // "Alicia"

1.2. Serialización de objeto a JSON: JSON.stringify()

El método JSON.stringify() convierte un objeto o valor de JavaScript en una cadena JSON. Maneja automáticamente todos los tipos primitivos, arreglos y objetos 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. Tipificación de datos al analizar JSON en TypeScript

La principal ventaja de TypeScript es la capacidad de asignar un tipo al resultado del análisis. Esto protege el código de errores en tiempo de compilación y lo hace autodocumentado.

2.1. Uso de interfaces y genéricos

Cree una interfaz que describa la estructura de sus datos y pásela a JSON.parse() como un genérico:

interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nconst jsonData = '{"id": 1, "name": "Víctor", "email": "victor@example.com", "isActive": true}';\nconst user: User = JSON.parse(jsonData);\nconsole.log(user.email); // "victor@example.com"\n// user.id ahora es estrictamente number

2.2. Manejo de objetos y arreglos anidados

Las interfaces funcionan muy bien con estructuras complejas:

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": "Elena", "address": {"city": "Moscú", "zip": "101000"}, "skills": ["TS", "JS", "Python"]}';\nconst employee: Employee = JSON.parse(employeeJson);\nconsole.log(employee.address.city); // "Moscú"

2.3. ¿Qué sucede si el tipo no coincide?

Es importante entender: TypeScript verifica los tipos solo en tiempo de compilación. Si en tiempo de ejecución llega un JSON con una estructura diferente (por ejemplo, age es una cadena en lugar de un número), el error ocurrirá en el código, pero no en JSON.parse(). Para total seguridad, use validadores en tiempo de ejecución (por ejemplo, Zod o io-ts), pero para la mayoría de los proyectos educativos, las interfaces son suficientes.

3. Serialización: detalles y transformaciones personalizadas

El método JSON.stringify() también se puede configurar