Conversor de JSON para tipos TypeScript

Cole um objeto JSON (ou um array JSON) para gerar automaticamente as interfaces/tipos TypeScript correspondentes.

Dicas de uso

  • Quando todos os elementos de um array são objetos, suas chaves são combinadas em uma única interface. Chaves ausentes em alguns elementos são automaticamente tratadas como opcionais (`?`).
  • O nome do tipo raiz é "Root" por padrão, mas pode ser alterado para o que preferir (por exemplo, `User`, `ApiResponse`). Os nomes de interface dos objetos aninhados são gerados automaticamente a partir do nome da propriedade correspondente.
  • Cole diretamente um JSON de exemplo da resposta da sua API para obter rapidamente um rascunho dos tipos usados na implementação do frontend.
  • O resultado gerado é apenas um rascunho inferido a partir da estrutura. Recomenda-se revisá-lo manualmente com base na especificação real da API (campos nullable, obrigatórios etc.) antes de usar.

Perguntas frequentes

Escrever definições de tipos manualmente a partir de uma resposta de exemplo da API é demorado e propenso a erros, como digitar errado o nome de uma chave ou deixar passar um tipo. A geração automática economiza bastante tempo dos desenvolvedores frontend e evita esse tipo de deslize.

As chaves de todos os elementos do array são combinadas; chaves presentes apenas em alguns elementos são automaticamente tratadas como propriedades opcionais (`?`). Se a mesma chave tiver tipos diferentes conforme o elemento, ela é representada como um tipo união (por exemplo, `string | number`).

As definições geradas são inferidas mecanicamente apenas a partir da estrutura do JSON de exemplo. Informações como se um campo aceita null ou se novos campos podem ser adicionados no futuro não podem ser determinadas apenas pelo JSON de amostra, por isso recomenda-se conferir com a documentação da API e ajustar manualmente.

O nome da interface de um objeto aninhado é gerado automaticamente a partir do nome da propriedade que o contém (por exemplo, um objeto sob a chave `profile` se torna uma interface chamada `Profile`). Se for necessária uma interface com o mesmo nome, mas formato diferente, um número é adicionado ao final para diferenciá-las.
ツールくん

Curiosidade — O problema da "defasagem de tipos" que as ferramentas de inferência resolvem

TypeScript é uma linguagem que permite detectar erros em tempo de compilação graças à tipagem estática, mas o compilador não tem como saber a forma dos dados JSON vindos de uma API externa, a menos que um desenvolvedor a defina manualmente. Toda vez que a especificação da API e a resposta de exemplo divergem, ou campos são adicionados ou removidos, é preciso atualizar as definições de tipos manualmente — e essa distância entre "o que os tipos dizem" e "o que a API realmente retorna" tem sido uma dor de cabeça recorrente em muitos projetos frontend.

Uma ferramenta de conversão de JSON para TypeScript resolve isso deduzindo os tipos mecanicamente a partir de uma resposta JSON de exemplo real, o que agiliza bastante esse trabalho. Uma ferramenta bem conhecida nessa área é o quicktype, um projeto de código aberto capaz de gerar definições de tipos para várias linguagens, conhecido por suportar diversos formatos de entrada, incluindo JSON Schema e esquemas GraphQL.

A dificuldade da inferência de tipos está no fato de que o próprio JSON não contém informações sobre se um campo está sempre presente ou se pode se tornar null no futuro. Por isso, as definições geradas automaticamente nunca são uma solução completa: a prática recomendada é tratá-las como um rascunho que reflete apenas a estrutura desta amostra específica, conferindo e ajustando de acordo com a especificação real da API.

Mais ferramentas nesta categoria