search

Found

info Visão geral

Cole qualquer JSON e infira os tipos em definições interface ou type do TypeScript, com objetos aninhados, arrays e modificadores readonly e opcional.

📘 Como usar

  1. Cole seu JSON no painel da esquerda
  2. Escolha o formato de saída (interface ou type) e um nome raiz
  3. Ative os modificadores readonly ou opcional conforme a necessidade

Conversor de JSON para TypeScript

Copiado!

Opções

Article

Conversor de JSON para TypeScript | Gere tipos a partir de uma amostra

Cole uma amostra de JSON e a ferramenta percorre suas chaves e valores para inferir definições interface ou type do TypeScript. Objetos aninhados e arrays viram tipos com nome próprio, e você pode adicionar readonly ou tornar todos os campos opcionais com um clique.

💡 Sobre esta ferramenta

Quem integra uma API de terceiros conhece a tarefa chata: a documentação é vaga, então você chama o endpoint, recebe um JSON de quarenta campos e precisa escrever a interface na mão. Esquece um objeto aninhado e o TypeScript reclama; erra uma chave e ganha um any silencioso. Para um payload bem aninhado, fazer isso manualmente é lento e cheio de erros de cópia.

Solte uma resposta JSON representativa e o conversor infere o formato. Strings viram string, números (inteiros ou decimais) viram number, booleanos viram boolean, null permanece null, e arrays recebem o tipo do elemento seguido de []. Cada objeto aninhado é extraído para a própria definição — uma cadeia user.address.geo se torna Root, Address e Geo — para que o modelo seja lido de cima para baixo. Se a raiz for um array de objetos, você recebe um tipo RootItem e um alias type Root = RootItem[].

Alterne entre interface e type no botão. Adicione readonly para modelos imutáveis ou marque "todos os campos opcionais" para colocar ? em cada propriedade ao tipar um objeto parcial. A saída é um ponto de partida limpo que você cola direto no editor e depois ajusta.

🧐 Perguntas frequentes

Q. Como os objetos aninhados são tratados? Cada um é extraído para um tipo separado com o nome da chave em inicial maiúscula. Um objeto profile dentro de user vira uma definição Profile independente, e o tipo pai a referencia pelo nome em vez de incorporá-la.

Q. Como o tipo dos arrays é inferido? Pelo primeiro elemento. [1, 2, 3] resulta em number[]; um array de objetos gera um tipo AlgoItem envolto como array. Um array vazio não pode ser inferido e recai em unknown[].

Q. interface ou type — qual escolher? Use interface se depender de extends ou mesclagem de declarações; use type se for adicionar uniões, interseções ou assinaturas de função. Para formatos de objeto simples eles são intercambiáveis: siga a convenção da sua equipe.

Q. Por que todo número vira number? O TypeScript não tem tipo inteiro, então 1 e 1.5 são ambos number. Da mesma forma, datas e IDs saem como string. Trate a saída como rascunho e restrinja para Date ou tipos literais onde fizer diferença.

Q. E os campos que às vezes são null? Se o valor da amostra for null, você recebe o tipo null. Na prática isso costuma significar "string ou null", então após gerar, amplie esses campos à mão para uma união como string | null; uma amostra só mostra um formato por vez.

📚 Curiosidades

O TypeScript usa tipagem estrutural, não nominal: dois tipos são compatíveis se seus formatos coincidem, independentemente do nome. Por isso uma interface Root gerada se encaixa onde o tipo real é esperado, desde que os campos batam — prático, mas também significa que dois objetos de significado diferente e mesmo formato são intercambiáveis sem aviso. A solução da comunidade são os tipos "marcados" (branded), como type UserId = string & { __brand: 'UserId' }, que adicionam uma propriedade fantasma para que uma string qualquer não passe despercebida. Tipos tirados de uma amostra são uma linha de partida, não de chegada: ainda falta adicionar segurança contra null, uniões literais e conversões para Date antes que estejam prontos para produção.