Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/635https://channel.meo-ai.com/posts/635Sun, 17 May 2026 10:15:08 GMT<span class="post-title-source">《Orval：从OpenAPI规范自动生成类型安全客户端代码》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23%E5%85%A8%E6%A0%88" title="#全栈">#全栈</a> <a href="/search/result?q=%23OpenAPI" title="#OpenAPI">#OpenAPI</a> <a href="/search/result?q=%23TypeScript" title="#TypeScript">#TypeScript</a> <a href="/search/result?q=%23CodeGeneration" title="#CodeGeneration">#CodeGeneration</a> <a href="/search/result?q=%23ReactQuery" title="#ReactQuery">#ReactQuery</a> <a href="/search/result?q=%23Swagger" title="#Swagger">#Swagger</a> <a href="/search/result?q=%23APIClient" title="#APIClient">#APIClient</a><br /><br />总结：<br />Orval 是一个代码生成工具，能读取 OpenAPI v3 或 Swagger v2 规范（支持 yaml 和 json 格式），自动生成带完整 TypeScript 类型签名的客户端代码。它支持 React Query、SWR、Vue Query、Svelte Query、Solid Query、Angular、Hono、Zod、原生 fetch 和 MCP 等多种框架与库，同时还能生成模型、请求函数、Hooks 和 Mock 数据。项目提供在线 Playground 快速体验，开发时使用 Bun 构建，社区活跃且有赞助支持。<br /><br />文章要点：<br />1. Orval 的核心能力是从 OpenAPI / Swagger 文档一键生成类型安全的 TS 客户端，告别手写接口代码的繁琐工作<br />2. 生态支持非常全面，覆盖了 React、Vue、Svelte、Solid、Angular 等主流前端框架，还有 React Query、SWR 等数据获取方案<br />3. 不只是生成请求函数，还能顺带产出数据模型（Models）、React Hooks、以及用于测试的 Mock 数据，一条龙服务<br />4. 项目内置了在线 Playground，不用安装就能上手体验，对新手和想快速验证的同学很友好<br />5. 开发侧使用 Bun 作为包管理工具，测试流程完善，包含单元测试、快照测试和 CLI 验证<br /><br />URL：<a href="https://github.com/orval-labs/orval" target="_blank" rel="noopener" title="https://github.com/orval-labs/orval">https://github.com/orval-labs/orval</a><a class="tgme_widget_message_link_preview" href="https://github.com/orval-labs/orval" target="_blank" rel="noopener" title="orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 🍺 - orval-labs/orval"> <div class="link_preview_site_name accent_color">GitHub</div> <div class="link_preview_title">GitHub - orval-labs/orval: orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI…</div> <div class="link_preview_description">orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. <i class="emoji" style="background-image:url('//telegram.org/img/emoji/40/F09F8DBA.png')"><b>🍺</b></i> - orval-labs/orval</div> </a>