JSON para TypeScript
Cole uma amostra JSON e a ferramenta infere interfaces TypeScript que correspondem à sua estrutura. Os campos são tipados pelos valores observados (string, number, boolean, Array<T>), objetos aninhados recebem suas próprias interfaces nomeadas, e campos observados como nulos ou ausentes tornam-se opcionais (?) ou anuláveis (| null), dependendo do estilo que você preferir.
Como converter JSON para TypeScript
-
1
Cole JSON
Uma única amostra é suficiente; várias amostras melhoram a inferência de nulidade e união.
-
2
Escolha o estilo de saída
`interface` (padrão), alias `type`, ou interface somente leitura com todos os campos marcados como `readonly`.
-
3
Escolha a estratégia opcional
Marque campos como `?` (pode estar ausente) ou `| null` (sempre presente, pode ser nulo).
-
4
Copie os tipos
Cole em um arquivo `.ts` e você terá acesso fortemente tipado à resposta da API.
Exemplo
Entrada:
{ "id": 1, "name": "Alice", "age": null, "tags": ["admin", "user"], "address": { "city": "Madrid" } }
Saída:
interface User {
id: number;
name: string;
age: number | null;
tags: string[];
address: Address;
}
interface Address {
city: string;
}
Mapeamento de tipos
| JSON | TypeScript |
|---|---|
| cadeia | string |
| inteiro / decimal | number |
| booleano | boolean |
| nulo sozinho | null |
| nulo + T | T | null (ou T?) |
| array de T | T[] |
| array misto | (T1 | T2)[] |
| objeto | Interface aninhada nomeada |
| array vazio | unknown[] (não pode inferir) |
Opcional vs anulável
foo?: string, o campo pode estar ausente do objeto. A verificação deundefinedse aplica.foo: string | null, o campo está sempre presente mas pode ser explicitamente nulo.foo?: string | null, pode estar ausente OU nulo.
O JSON em si não tem undefined, mas as APIs variam em como sinalizam a ausência. Combine com a semântica da sua API:
- APIs REST geralmente omitem campos ausentes ->
?:. - GraphQL sempre retorna todos os campos solicitados ->
| null. - Alguns SDKs usam ambos em diferentes contextos.
Tipos de união vs literais
Se a ferramenta vê o mesmo campo de string com um pequeno conjunto de valores em amostras ("status": "pending", "active", "archived"), ela pode emitir uma união literal de string:
status: "pending" | "active" | "archived";
Ative “inferir uniões literais de string” se você quiser isso.
Erros comuns
- Inferindo de uma amostra. Cada campo se torna obrigatório; a nulidade não pode ser observada. Passe de 5 a 10 amostras variadas para melhores tipos.
- Arrays vazios.
"tags": []não fornece informações de tipo, o gerador emiteunknown[]. Forneça uma amostra com pelo menos um elemento. - Arrays de tipos mistos.
[1, "two", true]produz(number | string | boolean)[]. Normalmente isso significa que o JSON deve ser redesenhado em vez de tipado. - Chaves de string numéricas. JSON
{"1": "a", "2": "b"}ainda é um objeto em TypeScript (Record<string, string>), não um array. O gerador lida com isso corretamente.
Perguntas frequentes
Combine com sua API. APIs REST que descartam campos nulos querem ?:. GraphQL, que sempre retorna todos os campos selecionados, quer | null. Quando em dúvida, T | null com sintaxe obrigatória é mais rigoroso e captura mais erros em tempo de compilação.
Sim, se você ativar e fornecer várias amostras. Um campo observado com 2-5 valores de string distintos em amostras é emitido como uma união literal. Além desse limite, ele volta a string.
interface para a maioria dos casos, é aberto à extensão e o TypeScript o otimiza melhor. Aliases type são úteis para uniões, interseções, tuplas e tipos mapeados. Para tipos derivados de JSON, ambos funcionam; escolha uma convenção de projeto.
Sim. Cada objeto aninhado se torna sua própria interface, com nomes derivados da chave (user.address -> Address). Para estruturas muito profundas ou repetitivas, considere um JSON Schema e um gerador dedicado de schema para TS.
Ferramentas relacionadas
Gerador de cards CSS
Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.
Contador de FPS
Meça o FPS do navegador com requestAnimationFrame: suavização, taxa de quadros mínima e máxima, limite de alerta e gráfico opcional. Roda localmente, sem upload nem API.
Gerador de textura de ruído
Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.
Gerador de Configuração Webpack
Crie um webpack.config.js para webpack 5 a partir de um formulário curto: defina o entry, a pasta de saída e o modo, e ative TypeScript, Babel, um loader CSS, HtmlWebpackPlugin e um servidor de desenvolvimento.
Desofuscador de JavaScript
Desofusque JavaScript minificado ou empacotado com renomeação de variáveis, decodificação de arrays de strings, reversão de achatamento de fluxo de controle e embelezamento.
Conversor de Tamanho de Arquivo
Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.
Ferramenta disponível em outros idiomas
- تحويل JSON إلى TypeScript [AR]
- JSON zu TypeScript [DE]
- JSON a TypeScript [ES]
- JSONからTypeScriptへ [JA]
- JSON till TypeScript [SV]
- JSON naar TypeScript [NL]
- JSON에서 TypeScript로 [KO]
- JSON vers TypeScript [FR]
- JSON ke TypeScript [ID]
- JSON sang TypeScript [VI]
- JSON เป็น TypeScript [TH]
- JSON do TypeScript [PL]
- JSON to TypeScript [EN]
- JSON a TypeScript [IT]
- JSON в TypeScript [RU]
- JSON'dan TypeScript'e [TR]
- JSON 转 TypeScript [ZH]