Utilo

OpenAPI vers mock et TypeScript

Collez une spécification OpenAPI 3 ou Swagger 2 (JSON ou YAML) pour générer des réponses mock réalistes, des interfaces TypeScript et un client fetch typé pour chaque endpoint, entièrement dans votre navigateur.

Ce que fait cet outil OpenAPI

Le travail de front-end commence souvent avant que le back-end soit prêt, et l'écriture manuelle de types pour une API qui a déjà une spécification est un effort gaspillé. Collez un document OpenAPI 3.x ou Swagger 2.0 en JSON ou YAML et cet outil génère trois choses: des mock responses réalistes pour chaque opération, des TypeScript types pour tous les schémas, et un petit client fetch avec une fonction par terminal. Tout est généré dans votre navigateur, donc les spécifications privées ou internes de l'API ne sont jamais téléchargées.

Mode d'emploi

  1. Collez vos spécifications ou téléchargez le fichier. JSON et YAML sont acceptés.
  2. La liste des points d'extrémité montre chaque opération avec sa méthode et son chemin.
  3. Ouvrez l'onglet ** mock data** et sélectionnez une opération pour voir une réponse d'échantillon, construite à partir d'exemples de schéma, de formats et d'énumérations.
  4. Pour les interfaces générées à partir de components/schemas (ou definitions dans Swagger 2), passer à TS types.
  5. Passez à TS client pour un client prêt à l'emploi et copiez dans votre projet.

Comment les moqueries sont générées

  • Les valeurs example et examples de la spécification gagnent toujours.
  • enum choisit la première valeur; default est respectée.
  • Les formats de chaîne produisent des valeurs plausibles: email, uuid, date-time, uri, ipv4 et ainsi de suite.
  • Les noms des propriétés donnent des indices, donc name, price ou createdAt semblent réalistes.
  • $ref, allOf, oneOf et anyOf sont résolus; les références récursives sont coupées en toute sécurité.
  • Les simulations sont déterministes par opération, donc elles ne changent pas à chaque mise à jour.

Utiliser le client généré

Le client exporte une constante BASE_URL et une fonction asynchrone par opération, nommée d'après son operationId (ou méthode et chemin si manquant), avec des paramètres de chemin tapés, des paramètres de requête et le corps de la requête, renvoyant la réponse tapée. Il dépend seulement de fetch, donc il fonctionne dans les navigateurs, Node 18+, Deno et Bun.

Questions fréquentes

Quelles versions de spécifications sont prises en charge ?

OpenAPI 3.0 et 3.1, ainsi que Swagger 2.0. Les $ref externes pointant vers d'autres fichiers ou URL ne sont pas récupérés; regroupez d'abord vos spécifications (par exemple avec redocly bundle).

Je peux faire fonctionner un serveur simulé ?

Cet outil montre des charges utiles simulées que vous pouvez copier dans les gestionnaires de MSW, les appareils ou Storybook. Pour un serveur simulé en cours d'exécution, des outils comme Prism peuvent utiliser la même spécification.

Comment cela se compare à openapi-typescript ?

Pour le code de production dans un pipeline de construction, les CLIs dédiés sont parfaits. Cet outil est destiné à l'exploration et au prototypage rapides et sans installation.

Mes spécifications sont téléchargées ?

Je ne veux pas. L'analyse et la génération sont entièrement locales.

Oui. Tout le traitement s'effectue directement dans votre navigateur grâce à JavaScript, aux Web Workers et aux API Web. Rien de ce que vous saisissez, collez ou importez n'est envoyé à nos serveurs.

Cette page a été traduite automatiquement depuis l'anglais. Si vous repérez une erreur, dites-le-nous.