Procesamiento de JSON en TypeScript: guía completa con ejemplos

Procesamiento de JSON en TypeScript: desde operaciones básicas hasta tipado avanzado

JSON (JavaScript Object Notation) sigue siendo el formato principal de intercambio de datos en el desarrollo web. TypeScript, al ser un superconjunto estrictamente tipado de JavaScript, proporciona herramientas potentes para trabajar con JSON de forma segura y eficiente. En este artículo, analizaremos todos los aspectos del procesamiento de JSON en TypeScript: desde el análisis simple hasta la validación compleja con genéricos y bibliotecas de terceros.

1. Operaciones básicas: análisis y serialización

TypeScript hereda completamente los métodos integrados de JavaScript para trabajar con JSON: JSON.parse() y JSON.stringify(). Sin embargo, su uso en TypeScript requiere especial atención a los tipos.

Análisis de cadenas JSON

// Análisis simple: el resultado es anyconst rawData = JSON.parse('{"name": "Alice", "age": 30}');// rawData tiene tipo any: perdemos todas las ventajas de TypeScript

// Enfoque correcto: especificar el tipo esperado mediante un genéricointerface User {  name: string;  age: number;}

const user: User = JSON.parse('{"name": "Alice", "age": 30}');// user ahora está tipado, pero TypeScript no verifica la correspondencia en tiempo de ejecución

Importante: JSON.parse() no verifica si la cadena proporcionada coincide con la interfaz especificada. Esto puede provocar errores en tiempo de ejecución. Para una validación fiable, utilice herramientas adicionales.

Serialización de objetos a JSON

const user: User = { name: "Bob", age: 25 };const jsonString = JSON.stringify(user);// Resultado: '{"name":"Bob","age":25}'

// Serialización personalizada con replacerconst filteredJson = JSON.stringify(user, ['name']);// Resultado: '{"name":"Bob"}'

// Formateo con sangríaconst prettyJson = JSON.stringify(user, null, 2);/* Resultado:{  "name": "Bob",  "age": 25}*/

2. Tipado de datos JSON: interfaces y tipos

El tipado correcto es la ventaja clave de TypeScript al trabajar con JSON. Veamos los enfoques principales.

Interfaces para estructuras de datos

interface ApiResponse<T> {  status: 'success' | 'error';  data: T;  message?: string;  timestamp: number;}

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

// Uso de genérico para tipar la respuesta de la APItype ProductResponse = ApiResponse<Product>;

const response: ProductResponse = {  status: 'success',  data: {    id: 'prod-123',    title: 'Wireless Mouse',    price: 29.99,    tags: ['electronics', 'accessories'],    inStock: true  },  timestamp: Date.now()};

Tipos para estructuras JSON dinámicas

// Para objetos con claves desconocidastype DynamicObject = Record<string, unknown>;

// Para diccionarios estrictamente tipadosinterface Config {  [key: string]: string | number | boolean;}

// Tipos unión para JSON polimórficostype Shape =   | { kind: 'circle'; radius: number }  | { kind: 'rectangle'; width: number; height: number }  | { kind: 'triangle'; base: number; height: number };

function calculateArea(shape: Shape): number {  switch (shape.kind) {    case 'circle': return Math.PI * shape.radius ** 2;    case 'rectangle': return shape.width * shape.height;    case 'triangle': return (shape.base * shape.height) / 2;  }}

3. Validación de datos JSON: comprobaciones en tiempo de ejecución

TypeScript verifica los tipos solo en tiempo de compilación. Para la validación en tiempo de ejecución de datos JSON (por ejemplo, de una API externa), utilice bibliotecas especializadas.

Uso de Zod para validación declarativa

import { z } from 'zod';

// Definimos el esquemaconst UserSchema = z.object({  name: z.string().min(2).max(50),  age: z.number().int().positive().max(120),  email: z