Qual a diferenca entre opcional (?) e anulavel (| null)?

Opcional significa que a chave faltava em alguns itens do array. Anulavel significa que a chave estava presente e o valor era JSON null. email?: string permite omitir o campo. note: string | null exige a chave. Este conversor nao junta os dois em email?: string | null a menos que o exemplo mostre ambos.

Devo emitir interface ou type alias?

Use interface para formas de objeto que voce pode estender ou mesclar entre arquivos. Use type alias para unions, intersections e mapped types. Para uma resposta de API tipica qualquer um serve; esta pagina usa interface por padrao porque e o estilo TypeScript comum para modelos JSON.

Por que um campo e unknown[] ou Record ?

Arrays vazios nao tem elementos para inspecionar, o fallback e unknown[]. Objetos vazios nao tem chaves, o fallback e Record . Cole um exemplo preenchido para um tipo concreto ou uma interface aninhada.

Isto substitui o quicktype?

Nao. quicktype.io cobre codegen em varias linguagens e validadores em runtime. Esta pagina e um conversor privado de JSON para interface TypeScript de um payload colado: sem instalar, sem conta, e com um relatorio que separa chaves opcionais de JSON null.

Nao. Parse e inferencia so ocorrem no navegador. Seguro para respostas internas, tokens e PII. Confira no DevTools Network: converter nao envia nenhum pedido.

Posso gerar tipos a partir de um array JSON?

Sim, e deve quando as chaves variam. Um array de registros e mesclado numa interface. Chaves ausentes ficam opcionais. Se voce nomear a raiz Users, a saida e interface User mais type Users = User[]. Se chamar User, tipifique o payload como User[].

Ferramentas para desenvolvedores

Conversor de JSON para interface TypeScript

Gere interfaces TypeScript a partir de um JSON no navegador: sem conta, sem upload, sem CLI de codegen.

Testar um exemplo

JSON de exemplo

A conversao corre no navegador. O JSON nao sai deste dispositivo.

Nome raiz

Nome PascalCase da interface de topo. Um array JSON chamado Users emite User mais type Users = User[].

Emitir como

interface e o formato usual de uma resposta de API e admite declaration merging. type alias serve para unions e mapped types.

Interfaces

Chaves opcionais

Chaves anulaveis

Unioes

? significa que a chave faltava em alguns itens do array. | null significa que o exemplo tinha JSON null. Nao sao a mesma coisa.

Notas de inferencia

A raiz JSON e um array. Tipifique o payload como Root[] (ou o alias de lista se usou um nome plural).

User.lastLogin so apareceu como null. Inclua um valor real no exemplo para inferir o tipo nao nulo.

Relatorio de propriedades inferidas
Interface	Chave	Tipo	Marcas
Address	city	string	obrigatoria
Address	postcode	string	opcional ?
User	id	number	obrigatoria
User	name	string	obrigatoria
User	role	string	obrigatoria
User	email	string	opcional ?
User	address	Address	obrigatoria
User	lastLogin	null	opcional ? \| null
User	tags	string[]	opcional ?

TypeScript

export interface Address {
  city: string;
  postcode?: string;
}

export interface User {
  id: number;
  name: string;
  role: string;
  /** Email string */
  email?: string;
  address: Address;
  lastLogin?: null;
  tags?: string[];
}

Sobre o Conversor de JSON para interface TypeScript

Gere interfaces TypeScript a partir de um JSON no navegador: sem conta, sem upload, sem CLI de codegen. Cole uma resposta de API ou, melhor, um array de registros. Objetos aninhados viram interfaces com nome, arrays sao tipados com todos os elementos (nao so o primeiro) e formas identicas sao deduplicadas. O analisador nao mistura chaves ausentes e JSON null: uma chave omitida em alguns itens e opcional (`?`); uma chave presente mas null e `T | null`. Copie o resultado para um `.ts` ou baixe-o. Combine com o Minificador JSON se o payload veio minificado, ou com o JSONPath Tester para inspecionar um campo antes.

Como usar o Conversor de JSON para interface TypeScript

Cole JSON (um array de registros infere chaves opcionais melhor do que um unico objeto). Carregue um exemplo se quiser ver opcional vs anulavel.
Defina o nome raiz (User, Order, ApiResponse). Escolha interface (padrao) ou type alias.
Leia o relatorio: quantidade de declaracoes, chaves opcionais, chaves anulaveis e unioes. Avisos marcam arrays vazios, objetos vazios, campos so-null e chaves entre aspas.
Copie o TypeScript ou baixe um .ts. Coloque em types/ e anote fetch / TanStack Query com o nome raiz.
Nada e enviado a um servidor. JSON invalido indica linha e coluna.

Exemplos de Conversor de JSON para interface TypeScript

Chave opcional a partir de um array de registros

[{"sku":"A1","qty":2},{"sku":"B7","qty":1,"gift":true}] vira Order com gift?: boolean. E opcional porque o primeiro item omitiu a chave, nao porque o valor era null.

Anulavel vs opcional

Dois usuarios em que email falta numa linha e note e null na outra emitem email?: string e note: string | null. Chaves ausentes e JSON null permanecem distintas; a maioria dos conversores junta as duas.

Interfaces aninhadas com nome

{"user":{"address":{"city":"London"}}} emite Address, depois User, depois Root. Objetos aninhados recebem PascalCase a partir da chave para voce importar Address sozinho.

Chaves entre aspas e recipientes vazios

{"content-type":"application/json","items":[],"meta":{}} cita content-type, tipa items como unknown[] e meta como Record<string, unknown>. Os avisos pedem um exemplo mais rico.

interface vs type alias

Deixe interface para formas de resposta de API (declaration merging, erros um pouco melhores). Mude para type alias se o arquivo tiver unions ou mapped types. Em runtime e identico.

Casos de uso comuns

Tipar respostas de fetch() ou axios em React, Vue ou Next.js
Gerar genericos do TanStack Query / SWR a partir de um payload real
Transformar um webhook (Stripe, GitHub, Slack) num evento tipado
Criar tipos para um fixture antes de existir OpenAPI
Passar um JSON de configuracao para TypeScript com autocompletar

Perguntas frequentes sobre o Conversor de JSON para interface TypeScript

Como converto JSON numa interface TypeScript?: Cole um JSON, nomeie a raiz e copie as interfaces. A conversao corre no navegador. Objetos aninhados viram interfaces com nome, arrays sao tipados com todos os elementos e chaves que faltam em alguns itens ficam opcionais com ?.
Qual a diferenca entre opcional (?) e anulavel (| null)?: Opcional significa que a chave faltava em alguns itens do array. Anulavel significa que a chave estava presente e o valor era JSON null. email?: string permite omitir o campo. note: string | null exige a chave. Este conversor nao junta os dois em email?: string | null a menos que o exemplo mostre ambos.
Devo emitir interface ou type alias?: Use interface para formas de objeto que voce pode estender ou mesclar entre arquivos. Use type alias para unions, intersections e mapped types. Para uma resposta de API tipica qualquer um serve; esta pagina usa interface por padrao porque e o estilo TypeScript comum para modelos JSON.
Por que um campo e unknown[] ou Record<string, unknown>?: Arrays vazios nao tem elementos para inspecionar, o fallback e unknown[]. Objetos vazios nao tem chaves, o fallback e Record<string, unknown>. Cole um exemplo preenchido para um tipo concreto ou uma interface aninhada.
Isto substitui o quicktype?: Nao. quicktype.io cobre codegen em varias linguagens e validadores em runtime. Esta pagina e um conversor privado de JSON para interface TypeScript de um payload colado: sem instalar, sem conta, e com um relatorio que separa chaves opcionais de JSON null.
Meu JSON e enviado?: Nao. Parse e inferencia so ocorrem no navegador. Seguro para respostas internas, tokens e PII. Confira no DevTools Network: converter nao envia nenhum pedido.
Posso gerar tipos a partir de um array JSON?: Sim, e deve quando as chaves variam. Um array de registros e mesclado numa interface. Chaves ausentes ficam opcionais. Se voce nomear a raiz Users, a saida e interface User mais type Users = User[]. Se chamar User, tipifique o payload como User[].

Minificador e formatador de JSON

Minificador e formatador de JSON online grátis. Minifique JSON para reduzir payloads ou formate com indentação de 2 espaços - valida na hora, sem upload.

Testador JSONPath

Teste JSONPath online no navegador. Extraia um campo de JSON, experimente um filtro e copie caminhos normalizados - nada e enviado.

Gerador de JSON Schema

Gerador de JSON Schema gratis no navegador. Cole JSON de amostra, infira tipos e formatos e copie um schema Draft-07 ou 2020-12. Nada e enviado.

Conversor JSON para CSV

Converta JSON para CSV e CSV para JSON no navegador. Achata objetos aninhados, desachata chaves com ponto ao voltar, NDJSON, preset Excel UE, RFC 4180. Nada e enviado.