Introducción
JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos que se utiliza ampliamente en el desarrollo web para transferir información entre el cliente y el servidor. TypeScript, al ser un superconjunto estrictamente tipado de JavaScript, proporciona herramientas potentes para trabajar con JSON de forma segura y conveniente. En este artículo, veremos en detalle cómo realizar el parsing y la serialización de JSON en TypeScript, usar tipos para garantizar la corrección de los datos y evitar errores típicos.
El trabajo correcto con JSON es críticamente importante para crear aplicaciones robustas y escalables. TypeScript no solo permite transformar cadenas JSON en objetos y viceversa, sino también garantizar que la estructura y los tipos de datos coincidan con lo esperado. Esto es especialmente útil al trabajar con APIs, archivos de configuración y bases de datos.
Fundamentos del parsing de JSON en TypeScript
El parsing de JSON es el proceso de convertir una cadena JSON en un objeto TypeScript. Para esto se utiliza el método global JSON.parse(). Sin embargo, a diferencia de JavaScript, en TypeScript podemos especificar el tipo esperado del resultado, lo que hace que el código sea más predecible.
Parsing simple sin tipos
Ejemplo básico de parsing de una cadena JSON:
const jsonString = '{"name": "Ana", "age": 30, "city": "Moscú"}';
const user = JSON.parse(jsonString);
console.log(user.name); // "Ana"
En este caso, TypeScript inferirá el tipo any para la variable user, lo que reduce la seguridad de tipos. Es mejor usar una indicación explícita del tipo.
Parsing con indicación de tipo mediante interfaz
El enfoque más correcto es definir una interfaz y usarla al hacer el parsing:
interface User {
name: string;
age: number;
city: string;
}
const jsonString = '{"name": "Ana", "age": 30, "city": "Moscú"}';
const user: User = JSON.parse(jsonString);
console.log(user.name); // TypeScript sabe que es string
Este enfoque permite que el IDE proporcione autocompletado y verifique los tipos en tiempo de compilación.
Manejo de errores de parsing
Las cadenas JSON pueden ser incorrectas, por lo que es importante manejar las excepciones:
function safeParseJSON<T>(json: string): T | null {
try {
return JSON.parse(json) as T;
} catch (error) {
console.error('Error de parsing JSON:', error);
return null;
}
}
const invalidJson = '{"name": "Ana", age: 30}'; // JSON incorrecto
const result = safeParseJSON<User>(invalidJson);
if (result) {
console.log(result.name);
} else {
console.log('No se pudo parsear el JSON');
}
La función safeParseJSON acepta un parámetro genérico, lo que permite reutilizarla para diferentes tipos de datos.
Serialización de objetos a JSON
La serialización es el proceso inverso de convertir un objeto TypeScript en una cadena JSON. Para esto se utiliza el método JSON.stringify(). TypeScript no añade nuevas capacidades a este método, pero ayuda a controlar qué datos terminan en la cadena resultante.
Serialización básica
const user: User = {
name: "Iván",
age: 25,
city: "San Petersburgo"
};
const jsonString = JSON.stringify(user);
console.log(jsonString); // {"name":"Iván","age":25,"city":"San Petersburgo"}
Uso de replacer para filtrar campos
El segundo parámetro de JSON.stringify() es una función replacer que permite controlar qué campos incluir en el resultado:
const jsonStringFiltered = JSON.stringify(user, (key, value) => {
if (key === 'age') {
return undefined; // Excluimos el campo age
}
return value;
});
console.log(jsonStringFiltered); // {"name":"Iván","city":"San Petersburgo"}
Esto es útil cuando se necesita ocultar datos sensibles o reducir el tamaño de la información transmitida.