JSON to TypeScript
Understand JSON to TypeScript
Este gerador lê uma amostra de JSON e escreve as interfaces TypeScript que descrevem o formato dela.
How it works
Ele percorre a amostra e infere um tipo para cada chave a partir do valor encontrado: uma string vira string, um número vira number, um objeto aninhado vira uma interface própria e nomeada, e um array vira o tipo do elemento seguido de []. A inferência tem exatamente um exemplo com que trabalhar, então a saída descreve aquele exemplo com precisão — é um primeiro rascunho que você edita, não um tipo derivado de um contrato.
When to use it
- Tipar a resposta de uma API de terceiros que não publica tipos.
- Transformar um payload gravado ou uma fixture de teste em interfaces.
- Obter um primeiro rascunho de uma resposta grande e aninhada em vez de digitá-la à mão.
- Ver o formato real de uma resposta, inclusive campos que a documentação nunca menciona.
Watch out for
- Um campo opcional que por acaso está ausente na amostra sai como obrigatório, e um campo presente mas null não diz nada ao gerador sobre o tipo real dele. Cole uma amostra que inclua os casos incômodos e depois marque os opcionais você mesmo.
- Todo número vira number. O TypeScript não tem tipo inteiro, então a distinção entre um ID e um preço se perde — e um ID acima de 2^53 já perdeu precisão quando o JSON foi interpretado, antes de o gerador sequer vê-lo.
- Um campo cujo tipo varia entre respostas — às vezes string, às vezes null, às vezes objeto — é tipado a partir da versão que você colou. A interface gerada compila e depois está errada em tempo de execução.
Not the right tool for: Substituir um schema. Se a API publica um documento OpenAPI ou JSON Schema, gere os tipos a partir dele — ele descreve todas as respostas, e não uma delas.
Frequently Asked Questions
Como converter JSON em uma interface TypeScript?
Cole um JSON representativo da resposta e dê um nome à interface raiz. Os tipos aparecem conforme você digita: objetos aninhados viram interfaces próprias e nomeadas, arrays são tipados pelos elementos deles, e o resultado fica pronto para colar em um arquivo .ts ou baixar.
Como as propriedades opcionais são detectadas?
A partir de um array de objetos, qualquer chave ausente em pelo menos um item é marcada como opcional com um ponto de interrogação. É por isso que colar vários registros representativos produz tipos melhores que colar um só — o gerador só enxerga o que a amostra mostra.
O que acontece com valores null?
Um null é tipado como null em vez de ser adivinhado, então uma chave vista tanto como número quanto como null vira number | null. Ative "Nulls viram opcionais" se a sua API usa null para significar ausente, e a chave passa a ser opcional.
How to Use JSON to TypeScript
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.