Gere interfaces ou tipos TypeScript a partir de uma amostra JSON
Funciona no seu navegador. Nada do que você digita é enviado a lugar nenhum.Digitar uma interface à mão a partir de uma resposta JSON é chato e fácil de errar. Cole 1 amostra e receba interfaces ou tipos TypeScript, com objetos aninhados e arrays resolvidos. A amostra fica no seu navegador, então uma resposta cheia de dados reais não vai a lugar nenhum.
Esta página foi traduzida automaticamente do original em inglês. Nenhuma pessoa revisou ainda a tradução; a versão em inglês é a que deve ser considerada. Ler o original em inglês
Cole uma resposta JSON de exemplo no painel JSON, ou clique em Ver um exemplo.
Defina o Nome raiz e escolha Interface ou Type.
Escolha como os valores null são tipados, "| null" ou Opcional, e ligue ou desligue Export ou Readonly.
Clique em Copiar, ou no ícone de download para salvar um arquivo .ts com o nome do tipo raiz.
Este conversor de JSON para TypeScript lê uma amostra dos seus dados e escreve as interfaces ou os aliases de tipo correspondentes. Cada objeto aninhado ganha sua própria declaração com nome, os arrays ganham tipos de elemento e o resultado se atualiza enquanto você digita, então dá para colar uma resposta e copiar tipos funcionando um segundo depois.
Desenvolvedores o usam ao integrar uma API nova: colam uma resposta da aba de rede e recebem os tipos para a chamada fetch. Ele também ajuda quando um arquivo de configuração ou o payload de um webhook ficou grande demais para tipar à mão, ou quando você herda fixtures JSON sem tipos e quer que o compilador comece a pegar erros.
O gerador olha todos os elementos de um array, não só o primeiro. Os objetos de um array são mesclados em uma única interface, e uma chave que falta em alguns deles vira opcional. Um campo que guarda tipos de valor diferentes vira uma união, como string | number. Valores null adicionam | null ou tornam a propriedade opcional; você escolhe. Formatos idênticos compartilham uma declaração, e chaves como pin-code ficam entre aspas.
Tudo roda no seu navegador e nada do que você cola é enviado. Os tipos descrevem só a amostra fornecida, então inclua um exemplo de cada variante esperada. Ctrl+Enter copia o resultado. Ferramentas relacionadas: JSON Formatter, YAML to JSON, CSV to JSON.
Cole o JSON no painel da esquerda. As interfaces aparecem à direita enquanto você digita. Defina o nome raiz, escolha interface ou type, clique em Copiar ou pressione Ctrl+Enter e cole o resultado em um arquivo .ts.
Tudo aqui é gratuito, sem cadastro e sem limite de conversões. A conversão roda inteira no seu navegador, então o JSON colado nunca sai do seu dispositivo e nenhuma cópia chega a um servidor. Dá para colar com segurança respostas de API com tokens de acesso, endereços de e-mail ou detalhes de pedidos.
Quando um array tem vários objetos, eles são mesclados em uma única interface. Uma chave que aparece só em alguns deles é marcada como opcional com um ponto de interrogação. Com a opção de null em Opcional, uma chave cujo valor é null também é marcada como opcional.
Os dois descrevem o mesmo formato. Interfaces podem ser estendidas e mescladas, e muitas equipes as preferem para objetos. Aliases de tipo também expressam uniões e tipos mapeados. Use o que o seu código já usa; a ferramenta escreve qualquer um dos dois.
O tipo do elemento vira uma união, por exemplo (string | number)[]. Um array vazio vira unknown[], porque não há nada para inferir; adicione um item de exemplo para ter um tipo preciso.
Sim. Arquivos de alguns megabytes são convertidos em bem menos de um segundo. Aninhamento profundo não é problema; cada nível ganha sua própria declaração com nome, e formatos idênticos são reaproveitados em vez de repetidos.
Ainda com dúvidas? Pergunte sobre JSON para TypeScript e qualquer pessoa que saiba pode responder. Não é preciso ter conta.