Trabajo con JSON en TypeScript: análisis y serialización de datos

Introducción al Trabajo con JSON en TypeScript

JSON (JavaScript Object Notation) sigue siendo uno de los formatos más populares para el intercambio de datos entre el cliente y el servidor. En TypeScript, que es un superconjunto estrictamente tipado de JavaScript, trabajar con JSON requiere atención especial a los tipos de datos. En este artículo, examinaremos a fondo cómo analizar y serializar JSON correctamente en TypeScript, evitando errores típicos y aprovechando los beneficios del tipado estático.

TypeScript proporciona todos los métodos integrados de JavaScript para trabajar con JSON, pero les añade un potente sistema de tipos. Esto permite crear código más fiable y predecible. Cubriremos tanto las operaciones básicas como las técnicas avanzadas, incluyendo funciones validadoras personalizadas y el trabajo con genéricos.

Fundamentos del Análisis JSON: JSON.parse()

El método JSON.parse() convierte una cadena JSON en un objeto JavaScript. En TypeScript, es importante tipificar correctamente el resultado para que el compilador pueda verificar la corrección de los accesos a las propiedades del objeto.

Sintaxis Básica y Tipado

Veamos un ejemplo sencillo:

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

El problema es que TypeScript no conoce la estructura del objeto user. La variable tiene el tipo any, lo que nos priva de todos los beneficios del tipado. La solución correcta es especificar explícitamente el tipo:

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

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

TypeScript lanzará un error porque JSON.parse() devuelve any y estamos intentando asignarlo a una variable tipada. Use la aserción de tipo:

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

Análisis Seguro con Comprobación de Tipos

La aserción de tipo as es una solución rápida, pero no garantiza que los datos coincidan realmente con la estructura esperada. Para el código de producción, se recomienda crear funciones validadoras:

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(`User: ${user.name}, age: ${user.age}`);}

Este enfoque previene errores en tiempo de ejecución si el servidor devuelve datos incorrectos.

Serialización: JSON.stringify()

El método JSON.stringify() convierte un objeto JavaScript en una cadena JSON. En TypeScript, este método funciona igual que en JavaScript, pero con conciencia de tipos.

Serialización Simple

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

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

Parámetros de Formato

Para una salida legible, utilice los parámetros replacer y space:

const user = {  name: 'Alexey',  age: 35,  city: 'Novosibirsk',  password: 'secret123'};

// Excluir el campo de contraseñaconst jsonString = JSON.stringify(user, ['name', 'age', 'city'], 2);console.log(jsonString);/* Salida:{  "name": "Alexey",  "age": 35,  "city": "Novosibirsk"}*/

El parámetro repla