Conversor de JSON para tipos TypeScript

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

Gerar tipos de TypeScript a partir de JSON

A primeira coisa de que se precisa ao consumir a resposta de uma API em TypeScript é uma definição de tipos. Escrever um `interface` à mão enquanto se semicerram os olhos sobre um JSON muito aninhado é trabalhoso, e **é justamente o tipo de tarefa em que se esquece uma propriedade ou se confunde um tipo.** Cole aqui o JSON e esta ferramenta gera o `interface` ou o `type` correspondente.

O gerador infere os tipos de TypeScript a partir dos tipos que os valores têm em JavaScript. **Os objetos aninhados são extraídos como interfaces à parte** e os arrays tomam o tipo dos seus elementos como `T[]`. Pode nomear livremente o tipo raiz, de modo que a saída se cola diretamente no seu projeto. **Como a inferência assenta inteiramente na amostra que cola, as propriedades que possam ser omitidas e os campos que possam ser nulos são coisas que há de acrescentar depois** com `?` ou uma união. Tudo corre no seu navegador.

Como gerar os tipos

  1. Cole o JSON Introduza uma resposta de exemplo tal qual. Serve tanto um objeto como um array.
  2. Nomeie o tipo raiz Será o nome do interface de nível superior. O valor por omissão basta se não tiver preferência.
  3. Reveja a saída Os objetos aninhados surgem extraídos como interfaces à parte.
  4. Acrescente você os campos opcionais **O que não aparece na amostra não pode ser inferido.** Acrescente `?` e `| null` onde couber.
  5. Copie-o para o seu projeto O resultado cola-se diretamente num ficheiro `.ts`.

Dicas para aproveitar melhor

  • 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.

Situações em que ajuda

Tipar uma API externa

Ainda que uma API não publique definições de tipos, uma resposta de exemplo dá-lhe um ponto de partida.

Tipar um ficheiro de configuração JSON existente

Quando quiser ler a configuração com segurança de tipos, a estrutura passa diretamente a um tipo.

Derivar tipos de dados simulados

Construindo primeiro a interface, pode produzir tipos a partir de dados provisórios.

Rever um tipo escrito à mão

Compare um tipo que escreveu com o gerado para encontrar o que falta.

Termos de TypeScript explicados

interface
Uma declaração que descreve a forma de um objeto. **Declarar o mesmo nome mais de uma vez funde-as automaticamente**, e isso distingue-a de um alias de tipo.
Alias de tipo
Uma declaração que dá nome a qualquer tipo. Pode nomear uniões e primitivos, coisa que um interface não permite.
Propriedade opcional
Um campo marcado com `?`, como `name?: string`. **Não pode ser inferido de uma amostra colada.**
Tipo união
Um tipo como `string | null`, que exprime que um valor pode ser qualquer um de vários tipos.
Objeto aninhado
Uma estrutura cujo valor é ele próprio um objeto. Esta ferramenta extrai-o como interface à parte.
Inferência de tipos
Derivar um tipo a partir de um valor. **A inferência aqui assenta na única amostra que cola, que não é forçosamente a especificação real da API.**

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.
Tool-kun

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.