DT Dev Tools

JSON para TypeScript

Infira interfaces TypeScript a partir de um exemplo JSON localmente. Este gerador gratuito percorre objetos aninhados, arrays e uniões sem enviar os seus dados.

🔒 Executa completamente no seu navegador — nada é enviado

Advertisement

O que faz o JSON para TypeScript

O JSON para TypeScript lê um exemplo JSON e infere interfaces TypeScript fortemente tipadas que descrevem a sua estrutura. Percorre o valor de forma recursiva: objetos tornam-se interfaces com nome, valores primitivos tornam-se os tipos correspondentes string, number, boolean ou null, e arrays tornam-se tipos de elemento entre parênteses retos. Quando um array contém elementos de tipos diferentes, o gerador combina-os numa união, para que o resultado continue compatível com os dados originais. É útil ao consumir uma API sem tipos publicados, ao acrescentar segurança de tipos a um payload legado ou ao transformar um fixture rápido num modelo reutilizável.

Os arrays de objetos são tratados com cuidado. Em vez de tipar apenas o primeiro elemento, a ferramenta combina todos os objetos do array numa única interface, reunindo a união das chaves. As chaves ausentes em alguns elementos são marcadas como opcionais com um ponto de interrogação final, o que reflete a forma como as respostas reais só incluem campos quando estes estão preenchidos. Os objetos aninhados são promovidos a interfaces com nome próprio, derivado do nome da propriedade, de modo que o resultado parece modelos escritos à mão e não um único tipo profundamente embutido.

Fluxo de trabalho privado no navegador

Toda a análise e inferência acontecem dentro do seu navegador, com JavaScript do lado do cliente. A ferramenta não envia para nenhum servidor o seu JSON, respostas de APIs, identificadores, tokens ou exemplos com o formato de dados de clientes, e não exige conta. Este modelo exclusivamente local é importante porque os dados colados num gerador de tipos são frequentemente uma resposta real de produção capturada durante a depuração. Manter o trabalho no seu computador reduz riscos e torna o resultado instantâneo, pois não há viagem pela rede entre colar e obter a saída.

A interface mantém próximos o JSON de entrada, o nome da raiz e as interfaces geradas, para que possa verificar a inferência antes de a copiar. Os resultados devem, ainda assim, ser revistos antes de serem integrados: um único exemplo não consegue revelar todos os campos opcionais, valores anuláveis ou enums que a API real pode devolver, por isso alargue os tipos onde o seu conhecimento do domínio indicar que um campo pode estar ausente ou assumir mais formas do que o exemplo mostra.

Dicas práticas

Forneça o exemplo mais completo que tiver, idealmente com campos opcionais preenchidos e um array com mais de um elemento, para que a lógica de combinação consiga detetar uniões e opcionalidade. Mude o nome da interface raiz para corresponder ao seu modelo de domínio antes de gerar. Depois de copiar, considere restringir os tipos inferidos de forma demasiado genérica: substitua campos string amplos por uniões de literais para enums conhecidos, marque os identificadores como branded types se o seu código os usar e confirme se algum campo que o inferidor tipou como null deve antes ser uma união anulável. A inferência no navegador é excelente para um primeiro rascunho rápido, mas os tipos finais devem refletir o contrato de que a sua aplicação realmente depende.

Como usar

  1. Cole o JSONAdicione um exemplo representativo de objeto ou array JSON.
  2. Dê um nome à raizEscolha o nome da interface raiz e depois gere as interfaces.
  3. Copie as interfacesReveja o TypeScript inferido e copie-o ou transfira-o.

Perguntas frequentes

Suporta objetos e arrays aninhados?
Sim. A inferência percorre recursivamente objetos e arrays aninhados, dando às interfaces filhas nomes derivados das chaves das propriedades.
Como são tratados os arrays com itens mistos?
Os tipos dos elementos são combinados numa união e, nos arrays de objetos, todas as chaves são fundidas, pelo que os campos opcionais são marcados com um ponto de interrogação.
O meu JSON é enviado para algum servidor?
Não. A inferência decorre inteiramente no seu navegador, com JavaScript do lado do cliente.
Advertisement