Ferramenta · Dados e formatos

Gerador de interfaces TypeScript a partir de JSON

Cole a resposta de uma API ou um JSON de exemplo e receba as interfaces TypeScript correspondentes. A ferramenta infere campos opcionais, listas, valores nulos e objetos aninhados.

JSON de exemplo

Cole o JSON

Nome da interface raizDeclarar como

export readonly

Pronto.

Tudo é lido no seu navegador. O JSON não é enviado a servidor.

TypeScript

Tipos gerados

Como a ferramenta infere os tipos

Ela olha os valores do exemplo, não um esquema. Cada valor define o tipo do campo, e as listas são lidas item por item, o que permite descobrir campos que aparecem em alguns itens e em outros não.

No JSON	No TypeScript
Texto, número, true/false	`string`, `number`, `boolean` (inteiros e decimais são ambos `number`)
`null`	`null`; se o campo tem texto em um item e null em outro, vira `string \| null`
Objeto dentro de objeto	Nova interface, com o nome da chave em PascalCase
Lista de objetos	Interface do item (`ClientesItem`) e lista `ClientesItem[]`
Campo que falta em alguns itens da lista	Campo opcional, com `?`
Lista com tipos misturados	União entre parênteses: `(string \| number)[]`
Lista vazia	`unknown[]`, porque não há o que inferir
Chave que não é um nome válido (com hífen, espaço)	Chave entre aspas: `"codigo-postal": string`

Exemplo

Este JSON, com o nome raiz Cliente:

{"id": 1, "nome": "Ana", "tags": ["a", "b"], "endereco": {"cidade": "Recife", "cep": null}}

gera:

export interface Cliente {
  id: number;
  nome: string;
  tags: string[];
  endereco: Endereco;
}

export interface Endereco {
  cidade: string;
  cep: null;
}

Cuidados

Um exemplo não é um contrato. Se o campo cep é sempre nulo no exemplo, mas na API real pode ser texto, a interface gerada dirá null. Use um exemplo que mostre os casos reais, ou cole uma lista com vários itens.
Datas ficam como string. O JSON não distingue data de texto.
Valores fixos viram string, não uma lista de valores aceitos. A ferramenta não infere enumerações.
Nomes de interface que coincidem com tipos do TypeScript (como Date ou Record) recebem o sufixo Obj, para não sombrear o tipo original.
Revise o resultado. Os tipos gerados partem de uma amostra.

interface ou type?

Para descrever o formato de um objeto, as duas formas funcionam. A interface pode ser estendida e mesclada em outras declarações; o type também descreve uniões e outros tipos. Escolha a que o seu projeto já usa.

Perguntas frequentes

A ferramenta valida o JSON?

Ela exige que seja um JSON válido para ler. Se houver erro de sintaxe, mostra a mensagem do navegador, que costuma indicar a posição.

Funciona com uma lista na raiz?

Sim. Se o JSON for uma lista de objetos, gera a interface do item e um type para a lista.

O JSON que colei é enviado a algum servidor?

Não. A conversão roda no seu navegador.

Os tipos gerados são verificados?

Nos testes do projeto, o código gerado é compilado pelo próprio compilador do TypeScript e precisa aceitar o JSON de exemplo e recusar versões corrompidas dele.