Gerador de Interfaces TypeScript a partir de JSON

O que faz um conversor de JSON para TypeScript?

Ele infere tipos estáticos a partir de dados de exemplo. Em vez de escrever à mão uma interface para cada resposta de API, você cola uma resposta real e recebe as declarações TypeScript correspondentes: uma interface nomeada para cada objeto aninhado, arrays tipados e unions onde os valores variam. É a forma mais rápida de ter autocomplete e verificação em tempo de compilação para dados recebidos de uma API REST, de um webhook ou de um arquivo de configuração JSON.

Como os tipos são inferidos

Arrays de objetos são mesclados

Quando um array contém vários objetos, o gerador os mescla em uma única interface, em vez de usar apenas o primeiro item. Uma chave que aparece em alguns itens, mas não em todos, vira opcional (archived?: boolean), e uma chave cujos valores variam entre os itens recebe um union type (license: string | null). As interfaces dos itens de array recebem o nome da chave no singular: repos → Repo, categories → Category. Formatos idênticos encontrados em lugares diferentes são declarados uma única vez e reutilizados.

interface ou type

Para formatos de objeto, as duas opções são quase intercambiáveis. Declarações interface podem ser estendidas com extends e mescladas ao serem declaradas novamente, além de geralmente gerarem mensagens de erro mais claras. Já os aliases type expressam unions, tuplas e mapped types. Muitos times usam interfaces para modelos de dados. Escolha a que combina com as regras do seu linter (por exemplo @typescript-eslint/consistent-type-definitions).

Limites da inferência: revise o resultado

Um exemplo mostra apenas o que estava lá. Um campo que é null no seu exemplo será tipado como null; ajuste para o tipo real (por exemplo string | null). Datas chegam como strings ISO e são tipadas como string, já que o JSON não tem tipo de data. Chaves que não são identificadores válidos, como social-links, são colocadas entre aspas automaticamente. Para validar em tempo de execução dados não confiáveis, combine esses tipos com um validador de schema, como o Zod. Organize seu exemplo antes com o JSON Formatter, ou converta configurações YAML com YAML para JSON antes de gerar os tipos.

Também pesquisado como: json para ts, json para interface typescript, gerador de interface typescript, json2ts, json para type typescript, gerar tipos a partir de json.

Ferramentas que combinam com: JSON para TypeScript

• CSV para JSON — Cole um CSV ou TSV e receba um array JSON de objetos.
• Conversor de SVG para JSX — Cole um SVG do Figma, do Illustrator ou de um conjunto de ícones e receba um componente React (JSX ou TSX) pronto para usar, com uma prévia segura do ícone.
• Conversor cURL — Cole um comando curl, da documentação de uma API ou da opção “Copiar como cURL” do DevTools do seu navegador, e receba código pronto para usar em seis linguagens, com headers, corpo e autenticação preservados.
• Validador JSON Schema — Cole um schema e um JSON para ver exatamente quais valores quebram cada regra, ou gere um schema inicial a partir de dados de exemplo.