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

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

No desenvolvimento web moderno, JSON (JavaScript Object Notation) tornou-se um formato universal para troca de dados entre cliente e servidor, armazenamento de configurações e transmissão de informações em APIs. TypeScript, como uma extensão do JavaScript, adiciona a essa flexibilidade um poderoso sistema de tipos, tornando o trabalho com JSON não apenas conveniente, mas também seguro. Neste artigo, vamos explorar como fazer o parsing (converter uma string JSON em objeto) e a serialização (converter um objeto em string JSON) de dados corretamente usando TypeScript. O material é voltado para desenvolvedores iniciantes que já conhecem os fundamentos do TypeScript, mas desejam trabalhar com JSON com confiança.

O que você aprenderá

\n
• Como usar os métodos nativos JSON.parse() e JSON.stringify().
\n
• Como tipar dados durante o parsing para evitar erros.
\n
• Como tratar exceções e verificar a validade do JSON.
\n
• Exemplos práticos com cenários reais.
\n

1. Fundamentos: Métodos JSON.parse() e JSON.stringify()

TypeScript herda do JavaScript dois métodos globais para trabalhar com JSON. Eles estão disponíveis sem a necessidade de importar bibliotecas adicionais.

1.1. Parsing de JSON para objeto: JSON.parse()

O método JSON.parse() recebe uma string no formato JSON e retorna um objeto JavaScript (ou array, número, string). No TypeScript, podemos especificar o tipo esperado do resultado usando generics.

// Exemplo simples sem tipagem\nconst jsonString = '{"name": "Alice", "age": 30}';\nconst user = JSON.parse(jsonString);\nconsole.log(user.name); // "Alice"

1.2. Serialização de objeto para JSON: JSON.stringify()

O método JSON.stringify() converte um objeto ou valor JavaScript em uma string JSON. Ele processa automaticamente todos os tipos primitivos, arrays e objetos simples.

const user = {\n  name: "Bob",\n  age: 25,\n  isAdmin: false\n};\nconst jsonString = JSON.stringify(user);\nconsole.log(jsonString); // '{"name":"Bob","age":25,"isAdmin":false}'

2. Tipagem de dados ao fazer parsing de JSON em TypeScript

A principal vantagem do TypeScript é a capacidade de definir um tipo para o resultado do parsing. Isso protege o código contra erros em tempo de compilação e o torna autodocumentável.

2.1. Uso de interfaces e generics

Crie uma interface descrevendo a estrutura dos seus dados e passe-a para JSON.parse() como um generic:

interface User {\n  id: number;\n  name: string;\n  email: string;\n  isActive: boolean;\n}\n\nconst jsonData = '{"id": 1, "name": "Victor", "email": "victor@example.com", "isActive": true}';\nconst user: User = JSON.parse(jsonData);\nconsole.log(user.email); // "victor@example.com"\n// user.id agora é estritamente number

2.2. Tratamento de objetos e arrays aninhados

As interfaces funcionam muito bem com estruturas complexas:

interface Address {\n  city: string;\n  zip: string;\n}\n\ninterface Employee {\n  id: number;\n  name: string;\n  address: Address;\n  skills: string[];\n}\n\nconst employeeJson = '{"id": 101, "name": "Elena", "address": {"city": "Moscou", "zip": "101000"}, "skills": ["TS", "JS", "Python"]}';\nconst employee: Employee = JSON.parse(employeeJson);\nconsole.log(employee.address.city); // "Moscou"

2.3. O que acontece se o tipo não corresponder?

É importante entender: o TypeScript verifica os tipos apenas em tempo de compilação. Se em tempo de execução chegar um JSON com estrutura diferente (por exemplo, age for uma string em vez de número), o erro ocorrerá no código, mas não no JSON.parse(). Para segurança total, use validadores em tempo de execução (como Zod ou io-ts), mas para a maioria dos projetos de aprendizado, as interfaces são suficientes.

3. Serialização: detalhes e transformações personalizadas

O método JSON.stringify() também pode ser configurado