Conversor de JSON para interface TypeScript + schema Zod | We.Inc
Cole JSON e receba interfaces TypeScript e um schema Zod de uma vez. Arrays são mesclados, então campos ausentes viram opcionais. Nada sai do seu navegador.
Cole qualquer amostra de JSON e este conversor escreve interfaces TypeScript para verificações em tempo de compilação e um schema Zod para validar dados em tempo de execução. Objetos aninhados ganham tipos próprios com nome, arrays de objetos são mesclados para que campos ausentes em alguns itens virem opcionais, e a conversão acontece localmente, então payloads privados ficam na sua máquina.
Como os valores JSON viram tipos
Valor JSON
TypeScript
Zod
"text"
z.string()
42 ou 4.2
z.number()
z.boolean()
z.null()
number[]
z.array(z.number())
interface com a: number
z.object({ a: z.number() })
Chave ausente em alguns itens do array
key?: type
.optional()
Os tipos só são tão bons quanto a amostra, então cole uma resposta que mostre todos os campos que você espera, de preferência com vários itens em cada array. Renomeie o tipo raiz, alterne entre interface e type alias e copie qualquer uma das saídas.
Tipos ou schema: do que você precisa?
Os tipos TypeScript somem quando o seu código é compilado. Eles ajudam o editor e pegam erros no seu próprio código, mas não conseguem avisar que uma API mandou uma string onde você esperava um número.
Um schema Zod é código de verdade que executa. Chamar parse nos dados recebidos lança um erro que aponta o campo com problema, e z.infer dá o tipo TypeScript a partir do mesmo schema, então os dois nunca se desencontram. Para dados que vêm de fora do seu app, o schema é a escolha mais segura.
Entendendo o que o conversor deduziu
Um campo que era null na sua amostra vira o tipo null, porque a amostra não dá outra pista. Troque para string | null (ou .nullable() no Zod) quando souber o que ele guarda, ou marque a opção que torna opcionais os campos null.
Um array vazio vira unknown[] pelo mesmo motivo. Datas chegam no JSON como strings, então continuam strings; no Zod você pode restringir uma para z.string().datetime() ou algo parecido quando souber o formato.
Os nomes dos tipos vêm das chaves: um array staff gera Staff, um objeto address gera Address. Se duas chaves gerarem o mesmo nome, um número é adicionado.
Cole o JSON na caixa, ou mantenha a amostra para ver como funciona.
Defina o nome do tipo raiz. Cada objeto aninhado ganha um nome a partir da chave dele.
Escolha interface ou type alias, e se as propriedades devem ser readonly.
Copie o TypeScript, o schema Zod ou os dois. Erros no JSON aparecem com a mensagem do parser.
Cole dois ou três itens em cada array para que os campos opcionais sejam detectados.
Remova valores sensíveis antes de compartilhar os tipos gerados; a ferramenta em si nunca envia nada.
Mantenha os schemas perto do código que busca os dados e faça o parse nessa fronteira, não lá dentro dos componentes.
Use safeParse em vez de parse quando quiser mostrar uma mensagem amigável em vez de lançar um erro.
Perguntas frequentes
Devo usar interface ou type alias?
Os dois descrevem formatos de objeto igualmente bem aqui. Interfaces com o mesmo nome se mesclam, o que ajuda ao estender tipos de bibliotecas; type aliases não se mesclam, mas podem nomear unions. Escolha um estilo para o código e mantenha.
Como obtenho o tipo TypeScript a partir de um schema Zod?
Use type User = z.infer<typeof UserSchema>. A saída Zod gerada já inclui essa linha abaixo de cada schema, então você não precisa manter interfaces separadas.
Por que um campo foi tipado como null?
A sua amostra tinha null ali, então não havia mais nada para deduzir. Substitua pelo tipo real unido a null, por exemplo string | null, ou z.string().nullable() no schema.
O meu JSON é enviado para um servidor?
Não. O parse e a geração rodam em JavaScript nesta página. Você pode carregar a página, ficar offline e ela continua funcionando.
Usando a saída
Validar uma resposta com o schema gerado
safeParse retorna sucesso ou uma lista de problemas em vez de lançar um erro, o que combina com código de fetch que deve mostrar um estado de erro.
O mesmo formato como interfaces simples
Útil para tipar props ou argumentos de funções quando os dados já são confiáveis.
Cole JSON, receba tipos
Cole uma resposta de exemplo. O conversor escreve interfaces TypeScript e um schema Zod correspondente lado a lado, mesclando todos os itens de um array para que campos ausentes em alguns itens saiam como opcionais.