JSON para TypeScript
Converta objetos JSON em interfaces e tipos TypeScript
Entrada e opções
Predefinições rápidas e exemplos
Roda no seu navegador. Os dados informados ficam neste dispositivo.
Resultados
Informe seus valores para ver o resultado.
Conversor de JSON para TypeScript online e gratuito
Nosso conversor de JSON para TypeScript transforma dados JSON brutos em interfaces ou type aliases do TypeScript devidamente tipados em segundos. Cole qualquer objeto ou array JSON, clique em "Converter" e receba definições de TypeScript limpas e prontas para produção, que você pode colocar direto no seu código. A ferramenta lida automaticamente com objetos aninhados, arrays com tipos mistos, valores nulos e estruturas profundamente recursivas.
Opções personalizáveis dão controle total sobre a saída. Alterne entre a sintaxe de interface e de type alias, marque todas as propriedades como opcionais, aplique o modificador readonly, adicione a palavra-chave export e defina um nome personalizado para a interface raiz. As interfaces aninhadas são nomeadas automaticamente com base nas chaves pai e colocadas no singular de forma inteligente, gerando nomes de tipo legíveis como "Project" a partir de um array "projects".
Seja para consumir uma API REST, migrar um projeto JavaScript para TypeScript ou documentar a estrutura dos dados para a sua equipe, esta ferramenta de JSON para TypeScript elimina o trabalho tedioso de escrever tipos à mão. Tudo funciona no seu navegador: seus dados JSON nunca são enviados a nenhum servidor, então é seguro usar com respostas de API proprietárias e payloads sensíveis.
Principais recursos
- Geração recursiva de interfaces para objetos JSON profundamente aninhados
- Detecção inteligente de tipos de array, com suporte automático a tipos união em arrays de tipos mistos
- Alterne entre a sintaxe de interface e de type alias
- Modificador de propriedades opcionais para definições de tipo flexíveis
- Modificador readonly para criar contratos de tipo imutáveis
- Palavra-chave export configurável para interfaces prontas para módulos
- Nome personalizado para a interface raiz
- Nomeação inteligente de interfaces aninhadas com singularização (por exemplo, "projects" vira "Project")
- Cópia com um clique do código TypeScript gerado para a área de transferência
- JSON de exemplo pré-carregado, com objetos aninhados, arrays e valores nulos, para testes rápidos
Como usar o conversor de JSON para TypeScript
- Configure as opções: Defina o nome da interface raiz e escolha entre interface ou type, propriedades opcionais, readonly e palavras-chave export.
- Cole seu JSON: Digite ou cole um objeto ou array JSON no painel de entrada à esquerda. Clique em "JSON de exemplo" para carregar um payload de demonstração.
- Clique em Converter: Pressione "Converter para TypeScript" para gerar a saída tipada no painel à direita.
- Revise a saída: Confira as interfaces geradas. Os tipos aninhados aparecem acima da interface raiz, para uma ordem de dependência clara.
- Copie para o seu projeto: Clique em "Copiar" para colocar o código TypeScript na área de transferência e depois cole no seu arquivo .ts ou .d.ts.
Casos de uso
- Consumo de APIs REST: Cole a resposta de uma API para gerar interfaces TypeScript que mantêm o seu frontend com tipagem segura.
- Migração de JavaScript para TypeScript: Converta fixtures JSON e dados de mock em definições tipadas como parte de um projeto de migração.
- Criação de DTOs no backend: Gere tipos de Data Transfer Object a partir de exemplos de payloads de requisição ou resposta para backends em Node.js.
- Documentação de API: Inclua as interfaces geradas na documentação da API para que quem a consome saiba a estrutura exata dos dados de requisição e resposta.
- Mapeamento de tipos do GraphQL: Use os tipos gerados como ponto de partida para as definições de tipo dos resolvers do GraphQL.
- Testes e mocks: Crie factories de dados de mock tipados a partir de respostas reais de API para testes unitários e de integração.
- Aprender TypeScript: Estudantes podem ver como valores JSON são mapeados para tipos TypeScript, construindo intuição sobre o sistema de tipos.
Perguntas frequentes
Esta ferramenta é gratuita?
Sim, o conversor de JSON para TypeScript é totalmente gratuito, sem cadastro nem limites de uso. Converta quantos payloads JSON precisar.
Meus dados estão seguros?
Sim. Toda a conversão acontece localmente no seu navegador. Seus dados JSON nunca são enviados a nenhum servidor, então você pode converter com segurança respostas de API proprietárias e estruturas de dados internas.
Qual é a diferença entre interface e type alias?
No TypeScript, tanto interface quanto type alias podem descrever a forma de objetos. As interfaces oferecem suporte à mesclagem de declarações e costumam ser preferidas para contratos de APIs públicas. Os type aliases são mais flexíveis e podem representar uniões, interseções e tipos primitivos. Escolha o que se alinha às convenções do seu projeto.
Ele lida com arrays de tipos mistos?
Sim. Se um array contém elementos de tipos diferentes (por exemplo, strings e objetos), o conversor gera um tipo união como (string | MyObject)[]. As formas dos objetos de todos os elementos são mescladas em uma única interface completa.
Posso converter arrays no nível raiz do JSON?
Sim. Se o JSON raiz for um array de objetos, o conversor cria uma interface para o item do array e um type alias para o array raiz. Se o array contiver apenas primitivos, ele gera um type alias simples como "type RootObject = string[]."
Dicas e boas práticas
- Use um exemplo de JSON representativo: Inclua todos os campos possíveis no seu exemplo para que a interface gerada capture a estrutura completa dos dados.
- Defina um nome de raiz que faça sentido: Troque "RootObject" por algo descritivo como "UserResponse" ou "ProductData" para deixar o código mais legível.
- Ative opcional para dados parciais: Se a sua API retorna campos diferentes conforme o contexto, marque as propriedades como opcionais para evitar erros de compilação.
- Use readonly para estado imutável: Quando os tipos gerados representarem um estado que não deve ser alterado (por exemplo, slices de store do Redux), ative o modificador readonly.
- Revise a nomeação dos aninhados: Confira se os nomes das interfaces aninhadas geradas automaticamente fazem sentido. Renomeie-os no seu código se a singularização produzir resultados estranhos.
- Combine com JSON Schema: Para uma validação completa, gere um JSON Schema junto com os tipos TypeScript, para validar os dados em tempo de execução e também em tempo de compilação.