Trabalhando com JSON em TypeScript: parsing e serialização de dados

Introdução ao trabalho com JSON em TypeScript

JSON (JavaScript Object Notation) continua sendo um dos formatos mais populares para troca de dados entre cliente e servidor. Em TypeScript, que é uma extensão estritamente tipada sobre JavaScript, o trabalho com JSON requer atenção especial aos tipos de dados. Neste artigo, vamos detalhar como fazer parsing e serialização corretos de JSON em TypeScript, evitando erros típicos e aproveitando as vantagens da tipagem estática.

TypeScript fornece todos os métodos embutidos do JavaScript para trabalhar com JSON, mas adiciona a eles um poderoso sistema de tipos. Isso permite criar código mais confiável e previsível. Vamos abordar tanto operações básicas quanto técnicas avançadas, incluindo funções validadoras personalizadas e trabalho com genéricos.

Fundamentos do parsing de JSON: JSON.parse()

O método JSON.parse() converte uma string JSON em um objeto JavaScript. Em TypeScript, é importante tipar corretamente o resultado para que o compilador possa verificar a correção dos acessos às propriedades do objeto.

Sintaxe básica e tipagem

Vamos considerar um exemplo simples:

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

O problema é que o TypeScript não conhece a estrutura do objeto user. A variável tem o tipo any, o que nos priva de todas as vantagens da tipagem. A solução correta é especificar explicitamente o tipo:

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

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

TypeScript emitirá um erro porque JSON.parse() retorna any, e estamos tentando atribuí-lo a uma variável tipada. Use a conversão de tipo:

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

Parsing seguro com verificação de tipos

A conversão de tipo com as é uma solução rápida, mas não garante que os dados realmente correspondam à estrutura esperada. Para código em produção, é recomendável criar funções 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(`Usuário: ${user.name}, idade: ${user.age}`);}

Essa abordagem previne erros em tempo de execução caso o servidor retorne dados incorretos.

Serialização: JSON.stringify()

O método JSON.stringify() converte um objeto JavaScript em uma string JSON. Em TypeScript, este método funciona da mesma forma que em JavaScript, mas levando em conta os tipos.

Serialização simples

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 formatação

Para uma saída legível, use os parâmetros replacer e space:

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

// Excluindo o campo passwordconst jsonString = JSON.stringify(user, ['name', 'age', 'city'], 2);console.log(jsonString);/* Saída:{  "name": "Alexey",  "age": 35,  "city": "Novosibirsk"}*/

O parâmetro repla