Trabalhando com JSON em TypeScript: parsing e serialização para iniciantes

Introdução: por que JSON e TypeScript são a dupla ideal

JSON (JavaScript Object Notation) é um formato leve de troca de dados que se tornou o padrão de facto para aplicações web. TypeScript, por sua vez, adiciona tipagem estática ao JavaScript, tornando o trabalho com dados mais seguro e previsível. Para desenvolvedores iniciantes, entender como fazer parsing (converter string em objeto) e serializar (converter objeto em string) JSON em TypeScript é uma habilidade fundamental.

Neste artigo, abordaremos todos os aspectos do trabalho com JSON em TypeScript: desde operações básicas até técnicas avançadas com tipagem. Você aprenderá como evitar erros comuns e escrever código limpo e sustentável.

Fundamentos do parsing de JSON em TypeScript

Parsing de JSON é o processo de converter uma string no formato JSON em um objeto TypeScript. A principal ferramenta para isso é a função global JSON.parse(). No entanto, em TypeScript, existem nuances relacionadas à tipagem.

Parsing básico de uma string JSON

Vamos considerar um exemplo simples: temos uma string JSON representando um usuário.

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

O problema é que o TypeScript não sabe qual estrutura o objeto user possui. Por padrão, JSON.parse() retorna o tipo any, o que anula as vantagens da tipagem estática.

Tipagem do resultado do parsing

Para corrigir isso, podemos especificar explicitamente o tipo do valor retornado. A maneira mais simples é usar 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 é string

Agora o TypeScript entende a estrutura do objeto e pode verificar os tipos das propriedades ao acessá-las.

Serialização de objetos para JSON em TypeScript

Serialização é o processo inverso: converter um objeto TypeScript em uma string JSON. Para isso, utiliza-se a função JSON.stringify().

Exemplo básico de serialização

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

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

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

A função JSON.stringify() converte automaticamente o objeto em uma string JSON. É importante lembrar que nem todos os valores podem ser serializados: funções, undefined, Symbol — eles serão omitidos ou substituídos por null.

Customização da serialização com replacer

Às vezes, é necessário controlar quais campos serão incluídos na string final. Para isso, JSON.stringify() aceita um segundo argumento — uma função replacer ou um array de chaves.

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

// Excluindo dados secretosconst safeJson = JSON.stringify(product, (key, value) => {    if (key === 'secretCode') {        return undefined; // Pula este campo    }    return value;});console.log(safeJson);// {"id":101,"title":"Notebook","price":54999.99,"discount":10}

Técnicas avançadas: trabalhando com objetos e arrays aninhados

Em aplicações reais, o JSON raramente é plano. Frequentemente encontramos objetos aninhados, arrays e estruturas de dados complexas. O TypeScript ajuda a gerenciar essa complexidade com o uso de interfaces.