Conversor de JSON para TypeScript
Gere interfaces TypeScript a partir de uma amostra JSON, com uma interface por formato distinto de objeto, mesmo dentro de arrays.
TypeScript gerado
Como funciona
Esta ferramenta infere definições de interface TypeScript a partir de uma amostra JSON inspecionando cada chave e valor, e então gera declarações de interface exportáveis. Arrays de objetos que repetem o mesmo formato, como uma lista de registros de API, geram uma única interface compartilhada em vez de uma duplicada por item.
- Colar JSON
Um objeto ou um array de objetos, como uma resposta de API.
- Nomeie a interface raiz
Objetos aninhados recebem sua própria interface, nomeada a partir do campo.
- Copiar o TypeScript
Atualiza conforme você digita ou altera uma opção.
Como os formatos são correspondidos e nomeados
Objetos aninhados geram uma interface nomeada separada. Por exemplo, um campo chamado address contendo city e zip torna-se uma interface Address, e a interface pai a referencia como address: Address. Os nomes das interfaces são derivados colocando a primeira letra do nome do campo em maiúscula.
Cada formato de objeto é reduzido a uma assinatura composta por seus nomes de propriedade e tipos ordenados. Quando dois objetos em qualquer lugar do JSON compartilham a mesma assinatura, como cada item em um array de registros, eles reutilizam a mesma interface em vez de gerar uma nova interface de formato idêntico com um sufixo numérico.
- Arrays: tipados como um array do tipo do elemento, por exemplo string[] ou Tag[]. Um array cujos elementos têm mais de uma forma distinta se torna uma união, por exemplo (Cat | Dog)[].
- Propriedades opcionais: desativadas por padrão, já que a amostra mostra todas as chaves como presentes. Ative "Todas as propriedades opcionais" quando seus dados reais às vezes omitirem campos.
- Chaves incomuns: um nome de propriedade que não é um identificador válido, como um que contém hífen, aparece entre aspas na saída.
Uma única amostra não pode mostrar todos os casos
Como qualquer inferência de esquema a partir de um único exemplo, um campo que às vezes é string e às vezes é number recebe o tipo conforme o valor que aparece na sua amostra, e tipos de união não são detectados automaticamente. Revise a saída e adicione tipos de união ou tipos literais de string onde seus dados reais variam. Tudo roda nesta página: seu JSON, que pode conter nomes de campos internos ou formatos de API proprietários, nunca é enviado para lugar nenhum.
Perguntas frequentes
Como gero interfaces TypeScript a partir de uma resposta de API JSON?
Cole o objeto ou array JSON no campo de entrada, defina o nome da interface raiz, cujo padrão é Root, e as interfaces serão regeneradas enquanto você digita. A ferramenta inspeciona cada chave e valor, infere o tipo TypeScript, string, number, boolean, null, interface aninhada ou array, e gera declarações de interface exportáveis prontas para serem adicionadas ao seu projeto TypeScript.
O gerador de TypeScript funciona offline e sem enviar meus dados para lugar nenhum?
Sim. Toda a geração é executada no seu navegador com JavaScript. Seus dados JSON, que podem conter nomes de campos internos, estruturas de dados ou formatos de API proprietários, nunca são transmitidos a nenhum servidor. O TypeScript de saída é gerado e exibido localmente.
Como esta ferramenta lida com objetos JSON aninhados e arrays?
Objetos aninhados geram uma interface nomeada separada. Por exemplo, um campo chamado address contendo city e zip se torna uma interface Address, e a interface pai a referencia como address: Address. Arrays são tipados como arrays do tipo do elemento, por exemplo string[] ou Tag[]. Um array de objetos que compartilham o mesmo formato produz uma única interface, reutilizada para cada elemento, em vez de uma interface separada por item.
Quando devo usar propriedades opcionais na interface TypeScript gerada?
Ative "Todas as propriedades opcionais" quando alguns campos no JSON puderem estar ausentes em certos objetos. Isso adiciona um ponto de interrogação após cada nome de propriedade, por exemplo email?: string, fazendo com que o TypeScript aceite objetos que omitem esses campos. Por padrão, todas as propriedades inferidas são obrigatórias. Se você estiver modelando uma API com parâmetros de consulta opcionais ou campos anuláveis, as propriedades opcionais evitam erros de tipo.
Qual é uma grande limitação de inferir tipos TypeScript a partir de uma única amostra JSON?
Como qualquer inferência de esquema a partir de um único exemplo, o gerador só consegue identificar o que está presente na amostra. Um campo que às vezes é string e às vezes é número recebe o tipo com base no valor que aparece na amostra. Tipos de união como string | number | null não são gerados automaticamente. Revise a saída com atenção e adicione tipos de união, genéricos ou tipos literais de string mais específicos onde seus dados reais variarem.