Processamento JSON em TypeScript: guia completo com exemplos

Processamento JSON em TypeScript: das operações básicas à tipagem avançada

JSON (JavaScript Object Notation) continua sendo o principal formato de troca de dados no desenvolvimento web. TypeScript, sendo um superconjunto estritamente tipado do JavaScript, fornece ferramentas poderosas para trabalhar com JSON de forma segura e eficiente. Neste artigo, abordaremos todos os aspectos do processamento JSON em TypeScript: desde o parsing simples até a validação complexa com genéricos e bibliotecas de terceiros.

1. Operações básicas: parsing e serialização

TypeScript herda completamente os métodos nativos do JavaScript para trabalhar com JSON: JSON.parse() e JSON.stringify(). No entanto, seu uso em TypeScript requer atenção especial aos tipos.

Parsing de string JSON

// Parsing simples — resultado anyconst rawData = JSON.parse('{"name": "Alice", "age": 30}');// rawData tem tipo any — perdemos todas as vantagens do TypeScript

// Abordagem correta: especificar o tipo esperado via genéricointerface User {  name: string;  age: number;}

const user: User = JSON.parse('{"name": "Alice", "age": 30}');// user agora é tipado, mas TypeScript não verifica a conformidade em tempo de execução

Importante: JSON.parse() não verifica se a string fornecida corresponde à interface especificada. Isso pode levar a erros em tempo de execução. Para validação confiável, use ferramentas adicionais.

Serialização de objetos para JSON

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

// Serialização personalizada com replacerconst filteredJson = JSON.stringify(user, ['name']);// Resultado: '{"name":"Bob"}'

// Formatação com indentaçãoconst prettyJson = JSON.stringify(user, null, 2);/* Resultado:{  "name": "Bob",  "age": 25}*/

2. Tipagem de dados JSON: interfaces e tipos

A tipagem correta é a principal vantagem do TypeScript ao trabalhar com JSON. Vamos explorar as principais abordagens.

Interfaces para estruturas de dados

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

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

// Usando genérico para tipar resposta de APItype ProductResponse = ApiResponse<Product>;

const response: ProductResponse = {  status: 'success',  data: {    id: 'prod-123',    title: 'Mouse sem fio',    price: 29.99,    tags: ['eletrônicos', 'acessórios'],    inStock: true  },  timestamp: Date.now()};

Tipos para estruturas JSON dinâmicas

// Para objetos com chaves desconhecidastype DynamicObject = Record<string, unknown>;

// Para dicionários estritamente tipadosinterface Config {  [key: string]: string | number | boolean;}

// Tipos Union para JSON polimórficotype 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. Validação de dados JSON: verificações em tempo de execução

TypeScript verifica tipos apenas em tempo de compilação. Para validação em tempo de execução de dados JSON (por exemplo, de uma API externa), use bibliotecas especializadas.

Usando Zod para validação declarativa

import { z } from 'zod';

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