Utilo

OpenAPI para mock e TypeScript

Cole uma especificação OpenAPI 3 ou Swagger 2 (JSON ou YAML) para gerar respostas mock realistas, interfaces TypeScript e um cliente fetch tipado para cada endpoint — tudo no seu navegador.

O que esta ferramenta OpenAPI faz

O trabalho front-end geralmente começa antes que o back-end esteja pronto, e escrever tipos à mão para uma API que já tem uma especificação é um esforço desperdiçado. Coloque um ** OpenAPI 3.x ** ou ** Swagger 2.0 ** documento em JSON ou YAML e esta ferramenta gera três coisas: realistas ** mock respostas ** para cada operação, ** TypeScript tipos ** para todos os esquemas, e um pequeno tipo ** fetch cliente ** com uma função por endpoint. Tudo é gerado no seu navegador, por isso as especificações de API privadas ou internas nunca são carregadas.

Como usar

  1. Coloque as suas especificações ou faça upload do ficheiro. Tanto o JSON como o YAML são aceites.
  2. A lista de pontos terminais mostra cada operação com o seu método e caminho.
  3. Abra a aba ** dados simulados ** e selecione uma operação para ver uma resposta de amostra, construída a partir de exemplos de esquema, formatos e enums.
  4. Mudar para os tipos TS para as interfaces geradas a partir de components/schemas (ou definitions no Swagger 2).
  5. Mude para TS cliente para um cliente pronto para uso e copiá-lo em seu projeto.

Como são geradas as mocas

  • Os valores example e examples da especificação sempre ganham.
  • enum escolhe o primeiro valor; default é respeitado.
  • Os formatos de cadeia produzem valores plausíveis: email, uuid, date-time, uri, ipv4 e assim por diante.
  • Os nomes das propriedades dão pistas, para que name, price ou createdAt pareçam realistas.
  • $ref, allOf, oneOf e anyOf são resolvidos; referências recursivas são cortadas com segurança.
  • As simulações são deterministas por operação, por isso não mudam a cada atualização.

Usando o cliente gerado

O cliente exporta uma constante BASE_URL e uma função assíncrona por operação, com o nome de seu operationId (ou método e caminho quando faltam), com parâmetros de caminho digitados, parâmetros de consulta e corpo de solicitação, devolvendo a resposta digitada. Só depende do fetch, por isso funciona em navegadores, Node 18+, Deno e Bun.

Perguntas frequentes

Quais versões de especificações são suportadas?

OpenAPI 3.0 e 3.1, mais o Swagger 2.0. Os $ref externos que apontam para outros arquivos ou URLs não são buscados; agrupar sua especificação primeiro (por exemplo, com redocly bundle).

Posso fazer funcionar um servidor simulado com isto?

Esta ferramenta mostra cargas úteis simuladas que você pode copiar em manipuladores de MSW, acessórios ou Storybook. Para um servidor simulado, ferramentas como o Prism podem usar a mesma especificação.

Como é que isto se compara com o openapi-typescript?

Para o código de produção em um pipeline de construção, CLIs dedicados são ótimos. Esta ferramenta é para exploração rápida, sem instalação e prototipagem.

As minhas especificações foram carregadas?
  • Não, não. A análise e a geração são totalmente locais.

Sim. Todo o processamento acontece diretamente no seu navegador usando JavaScript, Web Workers e APIs da Web. Nada do que você digita, cola ou envia vai para os nossos servidores.

Esta página foi traduzida automaticamente do inglês. Se encontrar um erro, avise-nos.