Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://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 类型：OpenAPI 驱动的 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 团队"契约优先"系列第三篇，介绍如何通过 OpenAPI 规范驱动 React 前端开发。核心思路是将 OpenAPI Spec 作为单一事实来源，利用 Hey API 自动生成 TypeScript 类型、SDK 客户端和 Zod 验证模式，配合 Nanostores 与 Nanoquery 实现类型安全的状态管理，并使用 MSW 在浏览器层面拦截网络请求进行模拟，实现前后端并行开发。当后端契约变更时，重新生成代码即可让 TypeScript 立即暴露所有需要更新的地方，避免生产环境出现类型不匹配错误。<br /><br />文章要点：<br /><br />- **手写 API 类型的痛点**：类型与后端脱节、缺乏运行时验证、重复样板代码、错误只能在生产环境发现<br />- **Hey API 自动生成**：通过 <code>openapi-ts</code> 从 OpenAPI 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: OpenAPI-driven React—Martian Chronicles, Evil Martians’ team blog</div> <div class="link_preview_description">Transform your React development with <mark class="highlight">contract</mark>-<mark class="highlight">first</mark> APIs. Generate TypeScript types, build type-safe clients, and develop with mocks while backend implements—no more waiting, no more integration chaos.</div> </a>