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 是一个代码生成工具，能读取 <mark class="highlight">OpenAPI</mark> 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 的核心能力是从 <mark class="highlight">OpenAPI</mark> / 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 <mark class="highlight">OpenAPI</mark>…</div> <div class="link_preview_description">orval is able to generate client with appropriate type-signatures (TypeScript) from any valid <mark class="highlight">OpenAPI</mark> 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>https://channel.meo-ai.com/posts/569https://channel.meo-ai.com/posts/569Mon, 02 Mar 2026 02:28:02 GMT<span class="post-title-source">《人生苦短，何必手写 API 类型：</span><mark class="highlight"><span class="post-title-source">OpenAPI</span></mark><span class="post-title-source"> 驱动的 React 开发》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23React" title="#React">#React</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=%23Hey_API" title="#Hey_API">#Hey_API</a> <a href="/search/result?q=%23MSW" title="#MSW">#MSW</a> <a href="/search/result?q=%23Nanoquery" title="#Nanoquery">#Nanoquery</a> <a href="/search/result?q=%23Contract_First" title="#Contract_First">#Contract_First</a><br /><br />总结<br /><br />本文是 Evil Martians 团队"契约优先"系列第三篇，介绍如何通过 <mark class="highlight">OpenAPI</mark> 规范驱动 React 前端开发。核心思路是将 <mark class="highlight">OpenAPI</mark> Spec 作为单一事实来源，利用 Hey API 自动生成 TypeScript 类型、SDK 客户端和 Zod 验证模式，配合 Nanostores 与 Nanoquery 实现类型安全的状态管理，并使用 MSW 在浏览器层面拦截网络请求进行模拟，实现前后端并行开发。当后端契约变更时，重新生成代码即可让 TypeScript 立即暴露所有需要更新的地方，避免生产环境出现类型不匹配错误。<br /><br />文章要点：<br /><br />- **手写 API 类型的痛点**：类型与后端脱节、缺乏运行时验证、重复样板代码、错误只能在生产环境发现<br />- **Hey API 自动生成**：通过 <code><mark class="highlight">openapi</mark>-ts</code> 从 <mark class="highlight">OpenAPI</mark> Spec 生成 TypeScript 类型、SDK 函数、Zod 验证模式和客户端配置，实现编译时与运行时双重安全<br />- **Nanostores + Nanoquery 状态管理**：将 API 数据视为全局状态存储在组件外，支持缓存、自动重取、跨组件共享，避免传统 Hooks 的数据获取陷阱<br />- **MSW 网络层模拟**：在浏览器层面拦截真实 HTTP 请求返回模拟数据，支持随机延迟、分页、过滤、错误场景，实现不依赖后端的功能开发<br />- **完整实战示例**：包含酒店管理系统代码，展示表单验证、CRUD 操作、路由集成、环境配置切换等完整开发流程<br />- **契约优先工作流**：后端更新 Spec → 前端重新生成 → TypeScript 报错定位 → 修复代码，确保集成一次成功<br /><br />文章URL：<a href="https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react" target="_blank" rel="noopener" title="https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react">https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react</a><a class="tgme_widget_message_link_preview" href="https://evilmartians.com/chronicles/lifes-too-short-to-hand-write-api-types-openapi-driven-react" target="_blank" rel="noopener" title="Transform your React development with contract-first APIs. Generate TypeScript types, build type-safe clients, and develop with mocks while backend implements—no more waiting, no more integration chaos."> <div class="link_preview_site_name accent_color">evilmartians.com</div> <img class="link_preview_image" alt="Life's too short to hand-write API types: OpenAPI-driven React—Martian Chronicles, Evil Martians’ team blog" src="/static/https://cdn4.telesco.pe/file/fFx49yUeDXr1tceP7qxaoV31dlNscRSoE9WwXNp7qwXZl82yRqOwikqCKNaCAEUrGiJYTGcQWP1VsMIEkEPnU5MDpv0c0FfuaUrRkWLrjvFkAfz7yEfmNRDqyhv2z-3SNmDCam-EQ5EpRlFVOBcwCOhPcRC5aKOm8VeNuTrtoASQ_ou8Txo40rzs66MZyEcFSUPJ42uE7D_8_IX6FWsit7zGNzwUQxY1OQELkejPJC1Narwd_XR3p8FROvGDSbkhCpaTFOUDTgojjwfyKJi1XqQK9dXbljZjSMXI9oMECh5Zj6M5xLrzfX9FvDrFwdmOmgUXuXGAx6yX6mOHUPNDzg.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Life's too short to hand-write API types: <mark class="highlight">OpenAPI</mark>-driven React—Martian Chronicles, Evil Martians’ team blog</div> <div class="link_preview_description">Transform your React development with contract-first APIs. Generate TypeScript types, build type-safe clients, and develop with mocks while backend implements—no more waiting, no more integration chaos.</div> </a>