JSON para TypeScript

Enviar

Interface TypeScript

Digite JSON na esquerda para iniciar a conversão

Pronto

Conversor online gratuito de JSON para TypeScript. Deduz automaticamente JSON em declarações de interface TS padrão. Suporta interfaces aninhadas, uniões, campos opcionais e readonly, opções de indentação 2/4 espaços, 100% no navegador.

Sugestões Relacionadas

Conversor de SQL

Formatador JSON

JSON para CSV

JSON para YAML

Consulta JSONPath

Formatador SQL

Sobre JSON para TypeScript: transforme dados JSON em tipos TS automaticamente

JSON para TypeScript é o processo de conversão de dados em formato JSON (objetos ou arrays JSON) em declarações de interface TypeScript. JSON (JavaScript Object Notation) é o formato de dados padrão para APIs REST, arquivos de configuração e logs, enquanto TypeScript é um superconjunto estaticamente tipado de JavaScript. No desenvolvimento cotidiano, escrever interfaces TS manualmente a partir do JSON da API é propenso a erros e consome tempo; esta ferramenta automatiza esse fluxo de trabalho.

No núcleo, a ferramenta deduz a estrutura de um objeto JSON e emite uma interface TypeScript. Cada chave do objeto se torna uma propriedade da interface; o tipo literal de cada valor é mapeado para sua contraparte TS: strings se tornam `string`, números `number`, booleanos `boolean`, null `null`, arrays `T[]`, e objetos aninhados em sub-interfaces independentes.

A inferência de tipos é o coração de JSON para TypeScript. JSON tem apenas seis tipos primitivos (null, boolean, number, string, array, object), enquanto o sistema de tipos básico do TypeScript inclui string, number, boolean, null, undefined, any, unknown, void, never, object, Array, T[], tipos união (A | B) e mais.

O tratamento de objetos aninhados é uma capacidade chave. Quando o JSON contém objetos aninhados, a ferramenta gera recursivamente sub-interfaces independentes para evitar duplicação. Por exemplo, `address: { street, city }` produz uma sub-interface RootAddress, e a interface principal a referencia via `address: RootAddress`.

A inferência de tipos de array tem três modos. Primeiro, arrays vazios voltam para `any[]` porque não há tipo de elemento para inspecionar. Segundo, quando todos os elementos compartilham o mesmo tipo, o resultado é `T[]` (por exemplo, `string[]` ou `User[]`). Terceiro, quando os tipos de elementos diferem, o resultado é um array união `(A | B)[]` (por exemplo, `(string | number)[]`).

Campos opcionais (?) são importantes no TypeScript strict mode. Quando a opção está ativada, a ferramenta escaneia o valor de cada campo; se vê null ou undefined, adiciona `?` a esse campo na interface, p. ex., `name?: string` significa que o campo pode estar ausente. Isso é inestimável para APIs backend que retornam campos opcionais. Campos readonly enfatizam a imutabilidade, produzindo código como `readonly id: number` para configuração, instantâneos de estado ou DTOs.

interface vs type alias é uma escolha comum para usuários TypeScript. A ferramenta gera interfaces porque são a forma padrão de descrever a forma de um objeto: suportam declaração de fusão, a palavra-chave implements e herança extends.

A conversão em tempo real é um recurso prático. A ferramenta converte 400ms após você parar de digitar, sem necessidade de clicar em um botão. Combinado com o realce de sintaxe TypeScript do CodeMirror, os usuários podem ver imediatamente a interface gerada e iterar rapidamente.

O auto-reparo de erros JSON aumenta a resiliência da ferramenta. JSON do mundo real frequentemente tem vírgulas finais, aspas simples, aspas ausentes ou comentários. A rotina interna tryFixJSON é ativada quando JSON.parse falha e tenta corrigir erros comuns.

O processamento puramente do lado do cliente é a decisão arquitetural central. Toda a análise JSON, inferência de tipos e geração de interface são executadas em JavaScript do navegador; nada é enviado a um servidor.

Casos de uso

Converta rapidamente respostas JSON de API REST ou GraphQL em interfaces TS durante o desenvolvimento frontend, evitando definir tipos manualmente.
Gere tipos TS para Props, State e parâmetros de componentes React/Vue/Angular a partir de JSON de amostra em segundos.
Compartilhe tipos entre frontend e backend em um projeto TypeScript full-stack, usando o JSON mock do backend como fonte única de verdade.
Gere interfaces TypeScript ao integrar APIs de terceiros (frete, clima, pagamentos) sem ler documentação longa.
Faça engenharia reversa de definições de tipos a partir de dados mock, fixtures de teste ou arquivos de configuração JSON para reforçar a segurança de tipos e dicas da IDE.
Converta exportações de JSON Schema de ORMs de banco de dados em interfaces TypeScript para definições DTO de backend Node.js.
Aprenda TypeScript convertendo JSON existente em exemplos de interface para entender tipos aninhados, uniões e campos opcionais.
Refatore object literals dispersos de JS em interfaces formais para melhorar a legibilidade do código e a segurança de tipos.

Como Usar

Cole JSON no editor esquerdo, clique em Upload para selecionar um arquivo .json/.txt, ou clique em Amostra para carregar o exemplo integrado.
Clique no botão do nome da interface à direita da barra de ferramentas (ou no ícone de engrenagem) para renomear a interface raiz (padrão Root) e alternar campos opcionais/readonly.
A ferramenta converte automaticamente com um debounce de 400ms. Visualize a interface TypeScript gerada à direita com o realce do CodeMirror.
Alterne entre indentação de 2 e 4 espaços na barra de ferramentas e ajuste a divisão entre os painéis esquerdo e direito para a melhor visualização.
Clique em Copiar para colocar o código TS na área de transferência, ou clique em Baixar para salvá-lo como um arquivo `${interfaceName}.ts` (p. ex., User.ts).
Cole o código no diretório `types/` ou `src/types/` do seu projeto e importe-o onde necessário.

Recursos

Inferência inteligente de tipos: reconhece automaticamente null, boolean, number, string, array e object e os mapeia para tipos TS nativos.
Expansão de objetos aninhados: cada objeto aninhado se torna sua própria sub-interface (p. ex., RootAddress) para uma hierarquia de tipos limpa e sem duplicações.
Inteligência de tipos de array: arrays homogêneos se tornam `T[]`, arrays de tipo misto se tornam uniões `(A | B)[]`, arrays vazios voltam para `any[]`.
Marcação de campos opcionais: quando ativada, os campos null ou undefined recebem o modificador `?`, produzindo código compatível com TypeScript strict mode.
Suporte a campos readonly: quando ativado, cada campo recebe o modificador `readonly`, ideal para estado imutável, configuração e DTOs.
Nome de interface personalizado: o nome da interface raiz é configurável (padrão Root) e o arquivo baixado é nomeado de acordo (p. ex., User.ts).
Opções de indentação 2/4 espaços: alterne entre indentação de 2 espaços (padrão ESLint) e 4 espaços na barra de ferramentas.
Conversão automática em tempo real: a ferramenta converte 400ms após você parar de digitar, com suporte a colar, upload de arquivo e carregamento de amostra.
Auto-reparo de erros JSON: a rotina interna tryFixJSON lida com vírgulas finais, aspas simples e aspas de chave ausentes automaticamente.
Realce de código TypeScript: o editor direito usa CodeMirror com a extensão de linguagem TypeScript para coloração clara de sintaxe.
Copiar e baixar: copie o resultado para a área de transferência com um clique ou salve como um arquivo .ts padrão pronto para seu projeto.
100% no navegador: toda a análise, inferência e geração de interface acontecem em JavaScript do lado do cliente; o JSON original nunca sai do seu dispositivo.

Perguntas frequentes

Como converto JSON em uma interface TypeScript?

Cole seu JSON no editor esquerdo e a ferramenta deduz automaticamente o tipo de cada campo (string, number, boolean, array, object, etc.) e gera uma interface TypeScript padrão. Objetos aninhados são extraídos em sub-interfaces separadas. A conversão é executada automaticamente 400ms após você parar de digitar.

A ferramenta gera type aliases ou interfaces?

Esta ferramenta gera exclusivamente declarações de interface TypeScript (não type aliases). As interfaces são a forma padrão de descrever a forma de um objeto em TypeScript: suportam declaração de fusão (declaration merging) e a palavra-chave implements.

Como marco campos como opcionais?

Ative "Campos opcionais (?)" no painel de configurações. A ferramenta escaneia o valor de cada campo e, quando encontra null ou undefined, adiciona automaticamente o modificador `?` à interface. Por exemplo, `name?: string` significa que o campo pode estar ausente.

Como gero campos readonly?

Ative "Campos readonly" no painel de configurações. Cada campo recebe o modificador `readonly`, por exemplo `readonly id: number`. Isso enfatiza a imutabilidade e é ideal para configuração, instantâneos de estado ou definições DTO.

Como a ferramenta lida com arrays?

A ferramenta analisa os tipos de elementos de cada array. Quando todos os elementos compartilham o mesmo tipo, emite `T[]` (por exemplo, `string[]`); quando os tipos diferem, emite um array união `(A | B)[]` (por exemplo, `(string | number)[]`); quando o array está vazio, volta para `any[]`.

Um objeto aninhado se torna sua própria interface?

Sim. Cada objeto aninhado se torna sua própria sub-interface nomeada combinando o nome da interface pai com o nome do campo em PascalCase. Por exemplo, uma interface Root que contém um objeto `address` produz Root e RootAddress.

Posso personalizar o nome da interface?

Sim. Clique no botão do nome da interface à direita da barra de ferramentas (ou abra a caixa de diálogo de configurações) para renomear a interface raiz (o valor padrão é Root). O arquivo .ts baixado também será nomeado com esse valor.

O arquivo .ts baixado pode ser usado diretamente em um projeto?

Sim. O código gerado segue as melhores práticas de TypeScript, inclui definições de tipos completas, interfaces aninhadas e tipos união, e pode ser colado em projetos React, Vue, Angular ou Node.js como está.

E se meu JSON falhar ao analisar?

Quando o JSON contém vírgulas finais, aspas ausentes ou aspas simples em vez de duplas, a ferramenta chama automaticamente tryFixJSON para tentar uma reparação. Se a reparação for bem-sucedida, você será notificado; caso contrário, o painel direito mostra a localização exata do erro.

Quais estruturas JSON são suportadas?

Todo JSON válido é suportado: primitivos (null, boolean, number, string), arrays de qualquer profundidade, objetos aninhados em qualquer profundidade e arrays de tipo misto (que se tornam tipos união). Entradas inválidas como funções, Symbols ou valores undefined não fazem parte da especificação JSON e não são aceitas.

Posso escolher o tamanho da indentação?

Sim. Um menu suspenso na barra de ferramentas direita permite alternar entre indentação de 2 e 4 espaços. Dois espaços correspondem ao padrão do ESLint/Prettier; quatro espaços atendem projetos que preferem indentação mais ampla.

Como isso difere de JSON Schema ou Zod?

JSON Schema é ótimo para validação de dados em tempo de execução (limites de API, validação de entrada do usuário). Zod e yup são validadores em tempo de execução amigáveis ao TypeScript que podem derivar tipos TS de um esquema. Esta ferramenta é um gerador leve apenas de definições de tipos; não realiza verificações em tempo de execução, foca em tipagem estática de frontend, é mais rápido e não tem dependências.

Solução de Problemas

A interface gerada parece errada. O que devo fazer?

Causas comuns: falha na análise JSON, identificação incorreta de objetos aninhados ou inferência incorreta de tipo de array. Tente estes passos: 1) Valide o JSON com um formatador JSON; 2) Para objetos aninhados, verifique as referências de sub-interface; 3) Para arrays, confirme que os tipos de elementos são consistentes; 4) Regenere ou edite manualmente a saída. A interface é um primeiro rascunho, então sempre ajuste os detalhes em relação à API real.

O arquivo .ts baixado não compila no meu projeto.

Causas prováveis: 1) tsconfig.json não tem strict mode mas o código gerado usa readonly; 2) o nome da interface colide com um tipo existente; 3) um nome de campo é uma palavra-chave TypeScript (como class ou type). Solução: ajuste strict mode, renomeie a interface ou coloque o campo conflitante entre aspas (p. ex., "class": string).

O JSON contém arrays aninhados mas o tipo deduzido está errado.

A ferramenta lida com arrays multidimensionais (p. ex. [[1, 2], [3, 4]]) recursivamente e produz number[][]. Se os tipos de elementos do array aninhado diferirem, a ferramenta emite ((A | B)[])[] . Arrays vazios sempre se tornam any[] porque não há tipo de elemento para deduzir.

Valores null são mapeados para o tipo `null` em vez de campos opcionais.

Por padrão, a ferramenta mapeia valores JSON null para o tipo `null` do TS (p. ex., middleName: null). Para produzir campos opcionais: 1) ative a opção Campos opcionais (recomendado); 2) remova os valores null do JSON para que o campo esteja ausente; ou 3) após a geração, altere manualmente `null` para `string | null` ou use `?`.

O nome da interface e o nome do arquivo baixado não correspondem.

Ambos são controlados pelo mesmo valor, a configuração Nome da interface (padrão Root). O arquivo baixado é nomeado `${interfaceName}.ts`. Se parecerem fora de sincronia, verifique se a ferramenta está aberta em várias abas com configurações diferentes. Reabra a página ou atualize as configurações para alinhá-las.

O código gerado está cheio de tipos `any`.

Causas prováveis: 1) o JSON contém valores que o parser não conseguiu reconhecer; 2) arrays estão vazios e voltam para any[]; 3) campos são null e a opção opcional está desativada. Solução: verifique a integridade dos dados, adicione mais dados de amostra para melhorar a inferência ou especifique manualmente os tipos para campos sempre vazios (p. ex., User[]).

Como uno a interface gerada com um tipo existente?

As interfaces TypeScript suportam declaração de fusão: interfaces com o mesmo nome fundem seus membros automaticamente. Basta declarar uma interface com o mesmo nome no seu projeto e exportá-la; por exemplo, a ferramenta emite `export interface User { id: number }` e você escreve `export interface User { name: string }`, e elas se fundem automaticamente em `{ id: number; name: string }`.

Glossário

JSON (JavaScript Object Notation): Formato leve de troca de dados baseado na sintaxe de objetos JavaScript, mas independente de qualquer linguagem de programação. Suporta seis tipos básicos: objeto ({}), array ([]), string, number, boolean e null.
TypeScript: Superset de JavaScript desenvolvido pela Microsoft que adiciona definições de tipos estáticos, interfaces, generics e outros recursos. O código TypeScript é compilado para JavaScript puro e executado no navegador ou no Node.js.
interface: Palavra-chave TypeScript que descreve a forma de um objeto. Sintaxe: `interface Name { prop: type; }`. Suporta declaração de fusão, a palavra-chave implements e herança extends.
type alias: Palavra-chave TypeScript que atribui um nome a um tipo. Sintaxe: `type Name = ...`. Útil para tipos união, interseção e tipos de função. Esta ferramenta emite exclusivamente interfaces.
Inferência de tipos: O processo usado por esta ferramenta para decidir o tipo TS para cada valor JSON com base em seu typeof e forma.
Campo opcional (?): Modificador TypeScript que marca um campo como possivelmente ausente. `name?: string` significa que o campo name pode não existir. Quando a opção de campo opcional da ferramenta está ativada, campos com valor null ou undefined recebem automaticamente o modificador `?`.
Campo readonly: Modificador TypeScript que marca um campo como imutável após a criação do objeto. `readonly id: number` significa que id não pode ser reatribuído.
Tipo união: Tipo TypeScript que permite que um valor seja um de vários tipos. Escrito como `A | B`. A ferramenta usa essa notação quando os elementos do array têm tipos diferentes.
Tipo array: Sintaxe TypeScript para arrays, disponível em duas formas: a forma genérica `Array<T>` e a forma curta `T[]`. A ferramenta sempre usa a forma curta.
Interface aninhada: Uma interface que referencia outras interfaces para formar uma hierarquia de tipos. A ferramenta produz uma sub-interface para cada objeto aninhado.
TypeScript strict mode: Coleção de opções rígidas do compilador TypeScript (noImplicitAny, strictNullChecks, strictFunctionTypes e mais). Com strictNullChecks ativado, null e undefined são tipos independentes.
DTO (Data Transfer Object): Objeto usado para transferir dados entre camadas (por exemplo, entre uma API e um serviço). Projetos TypeScript normalmente descrevem DTOs com interfaces, frequentemente usando readonly para reforçar a imutabilidade.
Declaração de fusão: Recurso TypeScript para interfaces: interfaces com o mesmo nome fundem seus membros automaticamente.
tsconfig.json: Arquivo de configuração do projeto TypeScript na raiz do projeto. Contém compilerOptions (target, module, strict e mais), include e exclude.
tryFixJSON: Rotina interna de reparo JSON da ferramenta que lida com vírgulas finais, aspas simples usadas em vez de aspas duplas, aspas de chave ausentes, comentários e outros erros comuns de sintaxe JSON.

Regras de mapeamento de tipos JSON para TypeScript

O conjunto completo de regras usadas pela função getTsType para mapear valores JSON para tipos TypeScript:

Valor JSON	Exemplo	Tipo TypeScript	Regra de detecção
`null`	`null`	`null`	JSON null é mapeado diretamente para TS null
`undefined`	`undefined`	`undefined`	Valores undefined são mapeados para TS undefined (apenas em tempo de execução)
`boolean`	`true / false`	`boolean`	typeof boolean é mapeado para TS boolean
`integer`	`1, 100, -9999`	`number`	Inteiros e floats são mapeados para TS number
`float`	`3.14, -0.5, 1e10`	`number`	Todos os literais numéricos são mapeados para number
`string`	`"Alice", "São Paulo"`	`string`	typeof string é mapeado para TS string
`empty array`	`[]`	`any[]`	Arrays vazios voltam para any[]
`homogeneous array`	`[1, 2, 3]`	`T[] (p. ex. number[])`	Elementos do mesmo tipo produzem um único tipo de array
`mixed array`	`[1, "a"]`	`(A \| B)[] (p. ex. (number \| string)[])`	Elementos de tipos mistos produzem um array união
`object`	`{a: 1, b: "x"}`	`SubInterface (p. ex. Root)`	Objetos aninhados se tornam sub-interfaces independentes que são referenciadas

Comparação interface vs type alias

Por que esta ferramenta gera interface em vez de type alias, e como elas se comparam em projetos TypeScript:

Capacidade	interface	type alias	Notas
Descrição de forma de objeto	✓ (preferida)	✓ (também suportada)	Ambas funcionam; a ferramenta emite interface
Declaração de fusão	✓ (mesmo nome funde)	✗ (erro em duplicata)	interface permite extensão gradual
implements/extends	✓ (classes podem implements)	△ (apenas objetos type)	interface é mais natural em OOP
Tipos união (A \| B)	✗	✓	type é mais conciso para uniões
Tipos interseção (A & B)	✗	✓	type é mais conciso para interseções
Tipos de função	△ (requer call signature)	✓ (direto)	type é mais intuitivo para funções
Desempenho (muitos tipos)	levemente mais rápido	levemente mais lento	interface funde incrementalmente
Escolha desta ferramenta	✓ uso unificado	✗	Esta ferramenta foca em tipos de objeto

Regras de geração de campos opcionais e readonly

Como as duas opções de alternância afetam o código gerado e quando usar cada uma:

Opção	Gatilho	Sintaxe gerada	Melhor para
Opcional (?): desativado	(padrão)	`name: string`	Rigoroso, todos os campos obrigatórios
Opcional (?): ativado	value === null \|\| value === undefined	`name?: string`	Campos opcionais, dados ausentes
Readonly: desativado	(padrão)	`name: string`	Tipos genéricos, campos graváveis
Readonly: ativado	aplica-se a todos os campos	`readonly name: string`	Estado imutável, configuração, DTOs
Ambos ativados	ambas condições se aplicam	`readonly name?: string`	Instantâneos de resposta API, configuração opcional

Privacy & Security

Esta ferramenta de JSON para TypeScript é executada inteiramente no seu navegador. A análise JSON, a inferência de tipos e a geração de interface acontecem em JavaScript do lado do cliente; nada é enviado para um servidor. Os uploads de arquivos usam a API nativa FileReader e nunca passam por um serviço intermediário. A ferramenta não usa cookies de rastreamento e não coleta dados de entrada ou uso. Todas as entradas e saídas são apagadas da memória assim que a página é fechada ou recarregada. Segura de usar com JSON que contenha chaves de API, tokens ou outros dados confidenciais.

Authoritative References

TypeScriptManual TypeScript - Interfaces
TypeScriptIntrodução ao manual TypeScript
MDNEspecificação JSON - MDN Web Docs
TypeScriptTypeScript Playground
TypeScriptReferência tsconfig.json
ZodZod - validação de esquema TypeScript-first