MyDevTools
PT

Conversor JSON para TypeScript

Gere interfaces ou type aliases TypeScript a partir de um exemplo JSON: tipos aninhados, itens de array mesclados, campos opcionais, export. No navegador.

Os dados inseridos e arquivos ficam no navegador

Entrada JSON

Cole um exemplo de JSON — as interfaces TypeScript são geradas enquanto você digita.

No editor, Tab insere recuo. Pressione Esc e depois Tab para sair do editor.

Saída TypeScript

As interfaces TypeScript aparecerão aqui...

Nesta página

Cole um exemplo de JSON — uma resposta de API, um arquivo de configuração, uma fixture de teste — e obtenha as declarações TypeScript correspondentes enquanto digita. Objetos aninhados viram interfaces com nome próprio, então a saída pode ir direto para um arquivo .ts.

Funcionalidade detalhada

Os tipos são inferidos a partir dos valores: string, number, boolean, null, arrays como T[], arrays mistos como uniões do tipo (number | string | null)[] e um array vazio como unknown[]. Cada objeto aninhado ganha uma interface com o nome do seu caminho em PascalCase (shipping_address dentro de Order → OrderShippingAddress). Todos os objetos de um array são mesclados em um único tipo de item: uma chave ausente em alguns elementos vira opcional, e uma chave com tipos de valor diferentes recebe uma união.

Opções: Nome raiz define o nome do tipo de nível superior (padrão Root); Palavra-chave export adiciona export a todas as declarações; Campos opcionais (?) — ativado por padrão — marca como opcionais as chaves cujo valor é null; Usar type alias escreve type X = { … }; em vez de interface X { … }. Um array na raiz gera um alias como export type Users = UsersItem[];. Chaves que não são identificadores válidos ficam entre aspas ("order-id": string;), e nomes de tipo que colidem recebem um sufixo numérico.

A saída é regenerada a cada edição (após uma breve pausa) e ao clicar em Converter ou pressionar Ctrl+Enter; JSON inválido mostra o erro do parser. O resultado fica em um editor somente leitura que você pode Copiar ou salvar com Baixar .ts como types.ts. Tudo roda localmente — o exemplo nunca é enviado nem salvo.

Exemplos práticos

Objeto de API: {"id":7,"user_name":"ann","tags":["a"],"manager":null} com Nome raiz User e Palavra-chave export gera export interface User { id: number; user_name: string; tags: string[]; manager?: null; }.

Array de objetos diferentes: [{"id":1,"email":"[email protected]"},{"id":2,"phone":"555"}] com Nome raiz Users gera export interface UsersItem { id: number; email?: string; phone?: string; } e export type Users = UsersItem[];.

Type aliases e chaves entre aspas: {"order-id":"A1","items":[{"sku":"x","qty":2}],"shipping_address":{"city":"Omsk"}} com Nome raiz Order e Usar type alias gera type OrderItemsItem = { sku: string; qty: number; };, type OrderShippingAddress = { city: string; }; e type Order = { "order-id": string; items: OrderItemsItem[]; shipping_address: OrderShippingAddress; };.

Como usar esta ferramenta

  1. Cole seu JSON

    Coloque um exemplo de JSON no editor Entrada JSON. A Saída TypeScript é atualizada automaticamente.

  2. Ajuste as opções

    Defina o Nome raiz e ative ou desative Palavra-chave export, Campos opcionais (?) e Usar type alias conforme necessário.

  3. Pegue os tipos

    Clique em Copiar para copiar as declarações ou em Baixar .ts para salvá-las como types.ts.

Dicas e melhores práticas

  • Um exemplo só mostra os valores que contém: um campo que é null no exemplo recebe o tipo null, então substitua-o manualmente pelo tipo real (por exemplo string | null).
  • Inclua vários elementos no array, com campos opcionais diferentes, para acertar o tipo do item.
  • Todos os números viram number, e datas em formato ISO continuam string.
  • Desative Campos opcionais (?) se os valores null são sempre enviados explicitamente e você quer manager: null como chave obrigatória.
  • Os nomes das propriedades mantêm a grafia original; apenas os nomes de tipo são convertidos para PascalCase.