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

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

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos que se ha convertido en el estándar de facto para aplicaciones web. TypeScript, por su parte, añade tipificación estática a JavaScript, lo que hace que trabajar con datos sea más seguro y predecible. Para los desarrolladores principiantes, entender cómo analizar (convertir una cadena en un objeto) y serializar (convertir un objeto en una cadena) JSON en TypeScript es una habilidad fundamental.

En este artículo, analizaremos todos los aspectos del trabajo con JSON en TypeScript: desde operaciones básicas hasta técnicas avanzadas con tipificación. Aprenderá a evitar errores típicos y a escribir código limpio y mantenible.

Fundamentos del análisis JSON en TypeScript

El análisis JSON es el proceso de convertir una cadena en formato JSON en un objeto TypeScript. La herramienta principal para esto es la función global JSON.parse(). Sin embargo, en TypeScript hay matices relacionados con la tipificación.

Análisis básico de una cadena JSON

Consideremos el ejemplo más simple: tenemos una cadena JSON que representa un usuario.

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

El problema es que TypeScript no sabe qué estructura tiene el objeto user. Por defecto, JSON.parse() devuelve el tipo any, lo que anula las ventajas de la tipificación estática.

Tipificación del resultado del análisis

Para solucionar esto, podemos indicar explícitamente el tipo del valor devuelto. La forma más sencilla es usar una aserción de tipo (type assertion).

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

const jsonString = '{"name": "Ana", "age": 28, "isStudent": false}';const user = JSON.parse(jsonString) as User;console.log(user.name); // TypeScript sabe que name es string

Ahora TypeScript entiende la estructura del objeto y puede verificar los tipos de las propiedades al acceder a ellas.

Serialización de objetos a JSON en TypeScript

La serialización es el proceso inverso: convertir un objeto TypeScript en una cadena JSON. Para esto se utiliza la función JSON.stringify().

Ejemplo básico de serialización

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

const product: Product = {    id: 101,    title: "Portátil",    price: 54999.99,    inStock: true};

const jsonString = JSON.stringify(product);console.log(jsonString);// {"id":101,"title":"Portátil","price":54999.99,"inStock":true}

La función JSON.stringify() convierte automáticamente el objeto en una cadena JSON. Es importante recordar que no todos los valores pueden ser serializados: funciones, undefined, Symbol — serán omitidos o reemplazados por null.

Personalización de la serialización con replacer

A veces es necesario controlar qué campos se incluirán en la cadena final. Para ello, JSON.stringify() acepta un segundo argumento: una función replacer o un array de claves.

const product = {    id: 101,    title: "Portátil",    price: 54999.99,    discount: 10,    secretCode: "SECRET123"};

// Excluimos datos secretosconst safeJson = JSON.stringify(product, (key, value) => {    if (key === 'secretCode') {        return undefined; // Omitimos este campo    }    return value;});console.log(safeJson);// {"id":101,"title":"Portátil","price":54999.99,"discount":10}

Técnicas avanzadas: trabajo con objetos y arrays anidados

En aplicaciones reales, el JSON rara vez es plano. A menudo se encuentran objetos anidados, arrays y estructuras de datos complejas. TypeScript ayuda a gestionar esta complejidad mediante interfaces.