acento.io
Ferramenta dev

JSON para TypeScript

Gere interfaces TypeScript a partir de qualquer JSON — detecção automática de campos opcionais, 100% no navegador, sem enviar dados para servidor algum.

Por Carlos Suárez , Engenheiro de sistemas
Última atualização:

O que este Json To Typescript faz

Esta versão em português do conversor analisa qualquer objeto ou array JSON e produz interfaces TypeScript prontas para uso, com inferência recursiva de tipos e detecção automática de campos opcionais em arrays heterogêneos — sem que você precise ajustar nada à mão. Ao contrário de ferramentas online como quicktype.io, aqui o processamento acontece inteiramente no seu navegador: 100% no navegador — seus dados nunca saem do seu computador. Sem uploads, sem rastreamento, sem logs em servidor. Isso importa especialmente quando o JSON contém tokens de autenticação (veja RFC 7519 para o formato JWT) ou dados sensíveis de clientes. A maior parte dos conversores gratuitos marca todos os campos como obrigatórios, deixando para você a tarefa de adicionar ? em cada propriedade que aparece só em alguns elementos da lista — aqui isso é feito de forma automática.

Recursos

  • Inferência recursiva de tipos. Objetos aninhados em qualquer profundidade geram interfaces separadas com referências cruzadas corretas, sem achatamento nem any desnecessário.
  • Detecção de campos opcionais. Quando um campo aparece em alguns elementos de um array mas não em outros, o conversor insere ? automaticamente — o comportamento esperado para um typescript json type bem modelado.
  • Nome do tipo raiz configurável. Você define o nome da interface principal antes de gerar. O padrão é Root, mas pode ser ApiResponse, UserPayload ou qualquer identificador válido em TypeScript.
  • Saída compatível com tsconfig. O código gerado funciona com qualquer tsconfig.json padrão, incluindo projetos com resolveJsonModule ativado — sem ajustes adicionais nas tsconfig options.
  • Privacidade por design. Nenhum byte do seu JSON trafega pela rede. A conversão roda em memória no próprio browser, o que elimina riscos de vazamento mesmo em ambientes corporativos.
  • Cópia com um clique. Botão de cópia integrado coloca as interfaces diretamente na área de transferência, prontas para colar no seu editor. Se precisar validar o JSON antes, o [formatador JSON](/pt/json-formatter/) é o passo anterior natural.

Como usar o Json To Typescript

Três passos para ter suas interfaces TypeScript prontas, sem instalar nada.

  1. Cole o JSON. Coloque no campo de entrada qualquer JSON válido — objeto simples, array de objetos ou estrutura aninhada. Exemplo mínimo: { "id": 1, "nome": "Belo Horizonte" }.
  2. Defina o nome do tipo raiz. No campo de configuração, troque Root pelo nome que faz sentido no seu projeto, como Cidade ou ApiResponse. Esse nome aparece na primeira interface gerada.
  3. Clique em Gerar. O conversor analisa o JSON, detecta tipos primitivos, arrays, objetos aninhados e campos opcionais, e exibe as interfaces TypeScript completas no painel de resultado.
  4. Copie e cole no seu projeto. Use o botão Copiar e cole direto em um arquivo .ts. Se o projeto usa tsconfig node json ou tem resolveJsonModule: true, as interfaces integram sem conflito.

Casos de uso comuns

  • Tipar respostas de APIs REST. Desenvolvedores em Salvador ou Belo Horizonte que consomem APIs de terceiros colam o payload de exemplo e obtêm um typescript json schema funcional em segundos, sem escrever tipos à mão.
  • Migrar projetos JavaScript para TypeScript. Em projetos legados com dados em JSON sem tipagem, o conversor gera as interfaces iniciais que podem ser refinadas progressivamente — reduzindo o tempo de migração de dias para horas.
  • Documentar contratos de API internamente. Equipes que mantêm um package.json com dependências TypeScript usam as interfaces geradas como documentação viva do formato esperado de cada endpoint.
  • Prototipagem rápida com dados reais. Durante um spike técnico, colar uma resposta real de API e gerar as interfaces em segundos elimina a etapa de modelagem manual, acelerando a validação do conceito. Se a API retorna YAML, use antes o [conversor JSON ↔ YAML](/pt/json-yaml-converter/) para normalizar o formato.
  • Revisão de código e code review. Revisores podem verificar rapidamente se as interfaces propostas refletem com fidelidade a estrutura do JSON — especialmente útil quando o PR inclui novos endpoints ou alterações em contratos existentes.

Perguntas frequentes

Meus dados JSON são enviados para algum servidor?

Não. Todo o processamento ocorre no seu navegador, em memória. Nenhum byte do JSON trafega pela rede. A ferramenta não tem backend, não registra logs e não usa cookies de rastreamento — você pode verificar isso inspecionando as requisições de rede no DevTools.

O que é `resolveJsonModule` e preciso ativá-lo?

resolveJsonModule é uma opção do tsconfig.json que permite importar arquivos .json diretamente em TypeScript e obter tipagem automática. Para usar as interfaces geradas aqui, não é necessário — elas são declarações TypeScript puras, compatíveis com qualquer configuração de tsconfig options.

Como campos opcionais são detectados?

Quando o JSON de entrada é um array, o conversor compara as chaves de todos os objetos do array. Qualquer chave ausente em pelo menos um elemento é marcada com ? na interface gerada. Isso corresponde ao comportamento esperado de um json parser typescript robusto.

Qual a diferença entre `json2ts` e esta ferramenta?

Ferramentas como json2ts enviam o payload para um servidor para processar. Aqui a conversão é 100% client-side. Além disso, a detecção de opcionais em arrays heterogêneos é automática, o que elimina a limpeza manual que a maioria dos conversores gratuitos exige.

O código gerado funciona com `tsconfig jsx` ou projetos React?

Sim. As interfaces geradas são TypeScript puro, sem dependência de ambiente. Funcionam em projetos com tsconfig jsx: react, react-jsx ou qualquer outra configuração — basta colar em um arquivo .ts ou .tsx.

O que acontece se o JSON tiver valores `null`?

Campos com valor null recebem o tipo null explicitamente, resultando em algo como campo: string | null. Isso reflete o comportamento do JSON.parse do ECMAScript — formalizado no ES5 em 2009 para substituir o uso inseguro de eval() em dados JSON. Você pode ajustar manualmente para string | null | undefined se necessário. Para validação mais complexa do schema, considere combinar com um [formatador JSON](/pt/json-formatter/) antes de converter.