Utilo

OpenAPI 轉 Mock 與 TS

貼上 OpenAPI 3 或 Swagger 2 文件(JSON 或 YAML),為每個介面生成逼真的 Mock 回應、TypeScript 介面和帶型別的 fetch 客戶端,全程在瀏覽器中完成。

這個OpenAPI工具的功能

前端工作往往在後端準備好之前就開始,並且手寫已經具備規範的API型別是浪費的努力。貼上一個OpenAPI 3.x或Swagger 2.0文件在JSON或YAML中,這個工具會生成三個東西:每次操作的模擬響應,所有方案的TypeScript型別,以及一個小型別的** fetch客戶端**,每個端點都有一個函式。所有的內容都是在瀏覽器中生成的,所以私人或內部API規格永遠不會上傳。

使用方法

  1. 貼上您的規格或上傳檔案。接受JSON和YAML。
  2. 終點列表顯示每個操作及其方法和路徑。
  3. 開啟 模擬資料 選項卡,選擇操作,以檢視從模式示例,格式和編號構建的樣本響應。
  4. 在 components/schemas (或 Swagger 2 中 definitions) 生成的介面中切換到 TS型別
  5. 切換到 TS客戶端,以便使用現成的客戶端,並將其複製到您的專案中。

模仿是如何產生的

  • 規格中的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中執行。

常見問題

支援哪些規格版本?

開放API3.0和3.1,加上Swagger2.0。沒有獲取指向其他檔案或URL的外部$ref;首先捆綁您的規範 (例如redocly bundle)。

我可以從這裡執行模擬伺服器嗎?

您可以將其複製到MSW處理器,具或故事書中。對於執行模擬伺服器,Prism 等工具可以使用相同的規格。

這與openapi-typescript有什麼不同?

對於在生產管道中的生產程式碼,專用CLI非常好。這種工具是用於快速,無需安裝的探索和原型。

我的規格上傳了嗎?

沒有。解析和生成是完全本地化的。

安全。所有處理都透過 JavaScript、Web Worker 和瀏覽器 API 在本地完成,你輸入、貼上或上傳的任何內容都不會傳送到我們的伺服器。

本頁內容由英文自動翻譯而來,如發現錯誤,歡迎告訴我們。