OpenAPI в моки и TypeScript

Что делает этот инструмент OpenAPI

Frontend работа часто начинается до того, как backend готов, и рукописные типы для API, который уже имеет спецификацию, - это напрасные усилия. Вставьте документ OpenAPI 3.x или Swagger 2.0 в JSON или YAML, и этот инструмент генерирует три вещи: реалистичные **мока ответы ** для каждой операции, **TypeScript типы ** для всех схем, и небольшой типизированный ** fetch клиент ** с одной функцией на конечную точку. Все создается в вашем браузере, поэтому частные или внутренние API-спецификации никогда не загружаются.

Как пользоваться

1. Вставьте свою спецификацию или загрузите файл. Принимаются как JSON, так и YAML.
2. Список конечных точек показывает каждую операцию с ее методом и маршрутом.
3. Откройте вкладку мока данных и выберите операцию, чтобы увидеть ответ на образец, построенный из примеров схем, форматов и списков.
4. Переключение на типы TS для интерфейсов, сгенерированных из components/schemas (или definitions в Swagger 2).
5. Переключитесь на TS client для готового к использованию клиента и скопируйте его в свой проект.

Как создаются маски

• Значения example и examples всегда выигрывают.
• enum выбирает первое значение; default уважается.
• Форматы строки производят правдоподобные значения: email, uuid, date-time, uri, ipv4 и так далее.
• Имена объектов дают подсказки, поэтому name, price или createdAt выглядят реалистично.
• $ref, allOf, oneOf и anyOf разрешены; рекурсивные ссылки безопасно отрезаны.
• Моки детерминированы по каждой операции, поэтому они не меняются при каждом обновлении.

Использование созданного клиента

Клиент экспортирует константу BASE_URL и одну асинхронную функцию на операцию, названную в честь operationId (или метода и пути при отсутствии), с введенными параметрами пути, параметрами запроса и телом запроса, возвращая введенный ответ. Он зависит только от fetch, поэтому работает в браузерах, Node 18+, Deno и Bun.