Gerador de interfaces TypeScript a partir de JSON online

O que faz

O gerador de JSON para TypeScript lê um exemplo JSON, como uma resposta de API ou um arquivo de configuração, e escreve interfaces TypeScript que o descrevem. Em vez de digitar cada campo à mão, você cola uma resposta real e recebe tipos prontos para o seu código, para resultados de fetch, estado do Redux ou dados de teste.

O gerador olha cada valor, não apenas o primeiro. Números viram number, texto vira string, objetos aninhados ganham interfaces próprias e os itens de um array são combinados, de modo que um campo presente só em alguns itens é marcado como opcional e um campo que às vezes é null é tipado como anulável.

Como usar

Cole JSON na entrada, envie um arquivo .json ou clique em Exemplo.
Defina o nome do tipo raiz e escolha o estilo: interface ou type, null como | null ou como campos opcionais, propriedades readonly e se cada declaração recebe export.
Copie o TypeScript ou baixe como arquivo .ts.

JSON inválido é indicado com a linha e a coluna do problema, para você corrigir o exemplo na hora.

Exemplo

Este JSON:

{ "id": 7, "name": "Ada", "tags": ["admin"], "manager": { "id": 1, "email": null } }

vira estas declarações:

export interface Root {
  id: number;
  name: string;
  tags: string[];
  manager: Manager;
}

export interface Manager {
  id: number;
  email: null;
}

Dicas

Um único exemplo só mostra o que contém. Se um campo pode ser texto ou null, inclua um caso de cada ou coloque vários exemplos em um array para que sejam combinados.
Nomes de campo que não são identificadores válidos, como first-name, são escritos entre aspas, então o resultado sempre compila.
O resultado é um ponto de partida. Restrinja campos de texto a uniões de literais ou a Date quando souber mais do que o exemplo.
Precisa de Go? O conversor de JSON para Go usa a mesma inferência para escrever structs com tags json.

Perguntas frequentes

› Como os objetos aninhados são tratados?

Cada objeto aninhado vira sua própria interface nomeada, com o nome da chave em PascalCase, então um campo address gera uma interface Address. Objetos com exatamente a mesma estrutura compartilham uma interface, e nomes que colidem recebem um número, como Address2.

› Como os arrays são tipados?

Todos os itens de um array são combinados em um único tipo de item. Um array de objetos vira um array de uma interface com o nome da chave no singular, então orders gera Order[]. Arrays mistos viram uma união como (string | number)[] e arrays vazios viram unknown[].

› Quando um campo é marcado como opcional?

Quando ele falta em alguns dos objetos de um array. Um campo presente em todos mas às vezes null é escrito por padrão como T | null; mude os valores null para opcional para remover o null e marcar o campo como opcional com um ponto de interrogação.

› Devo escolher interface ou type?

Os dois descrevem as mesmas formas de objeto. Interfaces podem ser estendidas e mescladas, e muitos guias de estilo as preferem para tipos de objeto. Aliases de tipo são práticos se você pretende combinar o resultado com uniões ou tipos mapeados. Escolha o que seu projeto usa.

› Meu JSON é enviado para um servidor?

Não. Os tipos são inferidos no seu navegador, então é seguro colar respostas reais de API.