JSON para TypeScript
Transforme um exemplo de JSON em interfaces ou type aliases TypeScript, com campos opcionais e unions deduzidos dos seus dados.
Funciona inteiramente no seu navegador
Os tipos são deduzidos do exemplo que você cola, então descrevem esse exemplo e não um schema: um campo que é string no seu exemplo pode ser número em outro lugar. Todos os números viram number e as datas continuam string. A ordem das propriedades segue o JSON.parse, que lista primeiro as chaves que são números inteiros.
Como gerar TypeScript a partir de JSON
- Cole uma resposta JSON ou um arquivo na caixa. Vários itens em um array melhoram o resultado, porque campos ausentes em alguns itens viram opcionais.
- Defina o nome do tipo de nível superior, escolha
interfaceoutypee marque export, readonly ou a detecção de opcionais conforme precisar. - Copie as declarações ou baixe-as como arquivo
.ts. Revise os nomes, já que eles vêm dos nomes das suas chaves.
Como deduzir tipos TypeScript de um exemplo de JSON
Converter JSON para TypeScript faz sentido porque os tipos descrevem o formato dos dados, e uma resposta JSON já carrega um formato: cada chave, o tipo de valor por trás dela e como os objetos se aninham. O conversor percorre o exemplo e escreve esse formato como declarações, para você não ter que digitar quarenta campos à mão antes de chamar uma API com segurança.
O passo mais importante é o tratamento dos arrays. Cada item de um array de objetos é lido e os formatos são mesclados: uma chave encontrada em todos os itens continua obrigatória, uma chave encontrada só em alguns vira opcional, e valores de tipos diferentes viram uma union. Por isso um exemplo com vários registros gera tipos muito melhores do que um exemplo com um só. Um valor null é tratado de forma diferente de uma chave ausente, porque os dois significam coisas diferentes para o código que lê o campo.
Tipos deduzidos são um ponto de partida, não um contrato. Eles não têm como saber que uma string é sempre um de três valores, que um número é na verdade um ID inteiro ou que um campo presente em todos os seus exemplos pode sumir em produção. Leia o resultado, renomeie o que ficou estranho e deixe mais rígidos os tipos que importam.
Dicas
- Confira antes se o exemplo está bem formado com Formatar e validar JSON, que aponta o caractere exato de um erro de sintaxe.
- Está trabalhando com uma configuração em YAML? Converta com Converter YAML para JSON e cole o resultado aqui.
- Precisa ver o conteúdo de um token antes de tipá-lo? Decodifique-o com o Decodificador de JWT.
Perguntas frequentes
Como ele decide que um campo é opcional?
Quando há um array de objetos, os objetos são mesclados em um único formato. Uma chave que aparece em alguns itens, mas não em todos, recebe ?. Uma chave presente que vale null em alguns itens não é opcional; ela vira T | null. Desative a detecção de opcionais se preferir todas as chaves obrigatórias.
Como os tipos aninhados são nomeados?
Cada objeto aninhado recebe o nome da sua chave em PascalCase, então billing_address vira BillingAddress. Em um array, o tipo do item perde o "s" final quando a chave tem mais de 3 letras e não termina em ss, us ou is: users gera User, enquanto address gera AddressItem. Essa regra de singular segue o inglês. Se dois formatos diferentes pedirem o mesmo nome, o segundo é numerado, gerando User e User2.
O que acontece com objetos de mesmo formato?
Eles compartilham uma única declaração. Se billing e shipping contêm { street, city }, você recebe uma só interface, com o nome do primeiro lugar onde ela aparece. Dois objetos com as mesmas chaves, mas com tipos de valor diferentes, são formatos distintos e recebem nomes separados.
Por que um array vazio vira unknown[]?
Um array vazio não tem exemplos, então não dá para deduzir nada sobre os itens. unknown[] é a resposta honesta; altere à mão quando souber o tipo do item. Um array que mistura valores vira uma union, como (string | number)[].
O resultado pode ser diferente da API real?
Sim. Um exemplo mostra apenas os valores que contém. Um campo que está sempre presente no seu exemplo, mas às vezes falta em produção, aparecerá aqui como obrigatório, e uma string com cara de enum será apenas string. Para validação rigorosa, use um schema; para começar rápido, use este resultado e ajuste.
Meu JSON é enviado para algum lugar?
Não. Nada do que você cola é enviado; a conversão roda no seu navegador, e você pode até se desconectar da rede depois que a página carregar.