Executando verificação de segurança...
1
jeancarlodev
1 min de leitura ·

PITCH: Se você tem um JSON e quer transformar em interface TypeScript, isso pode te ajudar

Se você trabalha com API em TypeScript, já deve ter passado por isso:

Recebe um JSON de resposta e começa a criar interface na mão, campo por campo, olhando a estrutura, copiando chave, ajustando tipo… um trabalho totalmente mecânico.

Eu estava fazendo isso de novo esses dias e resolvi montar uma página bem direta para esse único objetivo:

Você cola o JSON → ele gera as interfaces TypeScript organizadas.

Tudo roda no navegador, sem login, sem backend, sem enviar dados para lugar nenhum.

A ideia não foi “criar uma ferramenta”, foi só parar de gastar tempo com algo repetitivo.

Se isso também te incomoda, talvez seja útil:
https://quickeasy.tools/pt/tools/json-para-typescript

Fonte: https://quickeasy.tools/pt/tools/json-para-typescript

Carregando publicação patrocinada...
1
user1

Normalmente eu uso o https://transform.tools/json-to-typescript, mas ela tem um problema que quase todas as similares tem que é converter para interface enquanto eu prefiro trabalhar com type.

Para minha forma de trabalho, eu uso interface para o propósito que esse termo é usado na Orientação a Objetos, e não para definir estrutura de dados, para isso eu prefiro usar type.

1
jeancarlodev
  • Autor
    Autor

Sim, boto fé, faz sentido. Essa ali em cima tem a opção de escolher o output, se quiser como interface ou type.

Se tiver algum problema ali, ou bug, só me avisar, que assim que der eu corrijo

0
1
user1

Aquela opção gera um type único com tudo.
Diferente da opção com interface que segmenta os subtipos.

Exemplo com interface:

// Entrada
{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false,
  "teste": {
    "outro": 1
  }
};


// Saída
export interface Root {
  userId: number
  id: number
  title: string
  completed: boolean
  teste: Teste
}

export interface Teste {
  outro: number
};

Com aquela opção de type a saída será:

export type Root = {
  userId: number
  id: number
  title: string
  completed: boolean
  teste: {
    outro: number
  }
}

E isso tem sido uma característica de várias ferramentas do tipo, mas a sua já resolve isso, salvei aqui nos favoritos para usar depois.