Exemplo prático
Gere tipos a partir de amostras em que um registro tem id: 1 e outro id: null, e depois avalie se a propriedade deve ser nullable ou opcional.
Gerador JSON para TypeScript
Cole JSON e gere interfaces ou type aliases TypeScript com objetos aninhados, arrays, valores null, campos opcionais, propriedades readonly e ponto e vírgula.
Opções
O que é um gerador JSON para TypeScript?
Um gerador JSON para TypeScript transforma dados JSON de exemplo em interfaces ou type aliases TypeScript que descrevem o formato do objeto.
Ele ajuda ao consumir respostas API, documentar payloads, criar modelos front-end ou rascunhar tipos rapidamente antes de refiná-los no código.
Como usar o gerador JSON para TypeScript
- Cole um objeto JSON, array ou resposta API no editor.
- Escolha um nome de tipo raiz e se deseja gerar interfaces ou type aliases.
- Ative readonly, campos opcionais ou ponto e vírgula se isso combinar com o estilo do projeto.
- Clique em Gerar tipos e copie a saída TypeScript.
Dicas
- Use amostras JSON representativas para inferir melhor campos opcionais e formatos de arrays.
- Campos ausentes em alguns objetos de um array podem ser marcados como opcionais.
- Valores null são representados como unions, por exemplo string | null.
- Revise os tipos gerados antes de usá-los em código de produção.
Checks de modelagem TypeScript
Interface versus type
Interfaces funcionam bem para modelos de objeto extensíveis. Type aliases são úteis para unions, primitivos e saída gerada compacta.
Campos opcionais
Se uma API omite um campo em algumas respostas, mantenha-o opcional em vez de forçar valores required irreais.
Null e undefined
Um campo presente com null é diferente de um campo ausente. Revise unions geradas em projetos TypeScript strict.
Amostras representativas
Gere tipos a partir de exemplos API realistas com objetos aninhados, arrays, valores vazios e formatos alternativos.
Guias relacionados
Entenda o workflow por trás desta ferramenta e o que revisar depois.
Contratos de API
JSON Schema para contratos de API confiáveis
Um processo de criação de esquemas que transforma dados válidos e inválidos em documentação executável em vez de depender de um único exemplo ideal.
Ler guia
APIs e dados
Como depurar payloads JSON de API
Um workflow prático para formatar JSON, encontrar erros de sintaxe, validar o formato do payload e revisar o status quando dados de API parecem errados.
Ler guia
Verificações JSON-to-TypeScript antes de confiar em tipos gerados
Interfaces geradas descrevem a amostra colada, não todo o contrato da API; optional fields, unions, nulls e arrays precisam de revisão.
Use amostras representativas
Gere tipos a partir de payloads com estados vazios, erros, objetos aninhados, arrays, valores nullable e campos opcionais.
Marque campos nullable
Revise null, valores ausentes e strings vazias separadamente para que o TypeScript reflita o comportamento real em runtime.
Revise arrays e unions
Confira arrays com objetos mistos, valores primitivos e listas vazias antes de aceitar unions inferidas ou tipos estreitos demais.
Alinhe validação runtime
Use tipos gerados junto com schema validation ou tests de API quando dados vêm de serviços externos ou fontes controladas por usuários.
Um exemplo prático, um caso limite e uma nota do autor
Caso limite
Uma amostra não revela todo enum válido, variante de união ou campo opcional, então os tipos gerados podem ser mais estreitos que a API real.
Nota do autor
Trato as interfaces geradas como rascunho inicial e as reconcilio com o esquema da API e exemplos de produção.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Formatador JSON
Formate e reduza JSON instantaneamente.
Dados e Formatação
›
Validador/gerador de esquema JSON
Gere o esquema JSON a partir do JSON e valide o JSON no esquema.
Dados e Formatação
›
Testador JSONPath
Execute expressões JSONPath em JSON e inspecione valores e caminhos correspondentes.
Dados e Formatação
›
Escapar / Reverter escape de JSON
Escape texto para strings JSON e decodifique sequências de escape JSON.
Dados e Formatação
›
Validador e explorador OpenAPI / Swagger
Valide OpenAPI YAML ou JSON e explore endpoints, schemas, servidores, segurança e respostas.
Dados e Formatação
›
Perguntas frequentes sobre o gerador JSON para TypeScript
Ele suporta objetos aninhados?
Sim. Objetos aninhados são emitidos como interfaces ou type aliases nomeados.
Como arrays são tratados?
Arrays são inferidos a partir dos itens. Arrays de objetos são mesclados em um tipo de item comum, com campos ausentes como opcionais ou undefined.
Ele pode gerar type aliases em vez de interfaces?
Sim. Use o controle de estilo de declaração para alternar entre interfaces e type aliases.
Meu JSON é enviado?
Não. A geração de tipos é executada no seu navegador.