tRPC 解决的问题
了解前端与后端 API 契约之间的类型偏差,以及 tRPC 如何在无需代码生成的情况下消除偏差
tRPC 解决的问题 是 CoddyKit 上的免费 React Academy 课时。 这是第 1 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。
类型漂移问题
当您使用 TypeScript 构建 REST API 时,服务端会定义响应结构。客户端必须手动创建匹配的 TypeScript 类型。随着 API 演进,这些类型会逐渐发生漂移;由于类型定义位于不同的软件包中,编译器无法捕获这种不匹配。
服务端重命名字段后,客户端就会出现一个静默的运行时错误。
GraphQL 代码生成作为一种解决方案
GraphQL 可以通过 graphql-codegen 之类的工具从模式生成 TypeScript 类型,从而解决类型漂移问题。这种方式效果很好,但也会增加复杂性:需要单独的查询语言(GraphQL SDL)、构建流程中的代码生成步骤,以及模式管理工具。
对于已经投入使用 GraphQL 的团队,代码生成是正确的选择。对于希望获得类型安全、却不想承担 GraphQL 额外开销的团队,tRPC 提供了另一种方案。
tRPC:通过 TypeScript 导入类型
tRPC 的方法简单得近乎彻底:在服务端将 API 过程定义为 TypeScript 函数,导出路由器类型,然后在客户端导入该类型。不需要代码生成,也不需要单独的模式语言。
TypeScript 编译器本身会在构建时强制检查客户端与服务端之间的契约。
单仓库要求
tRPC 要求服务端和客户端通过 TypeScript 导入共享类型。在单仓库中,这种方式非常自然;Turborepo、Nx 和 pnpm workspaces 都允许服务端和客户端作为相互导入的独立软件包存在。
如果后端和前端完全分离,您需要将路由器类型发布为共享软件包。虽然这会增加一个发布步骤,但仍然不需要代码生成。
tRPC 类型的传递方式
在服务端,您需要定义路由器并导出其类型:export type AppRouter = typeof appRouter。在客户端,您导入该类型并创建类型化客户端:createTRPCReact
如果在服务端重命名某个过程,客户端会立即显示 TypeScript 错误。
自动补全与重构
由于 tRPC 直接使用 TypeScript 的类型系统,您的编辑器会在客户端为过程名称、输入结构和返回类型提供完整的自动补全。重命名过程属于 TypeScript 重命名重构,而不是在整个代码库中手动搜索并替换。
在实际使用中,这种开发者体验的改进是 tRPC 最受好评的特性。
tRPC 传输方式
默认情况下,tRPC 使用 HTTP 作为传输方式。每次过程调用都是一个 HTTP 请求。tRPC 也支持使用 WebSockets 进行订阅。传输方式属于实现细节;无论使用哪种传输方式,客户端 API 都完全相同。
您还可以使用 REST 适配器,将 tRPC 过程公开为传统 REST 端点,以兼容非 tRPC 客户端。
tRPC 生态系统
tRPC 可以作为中间件用于 Express、Fastify 和 Hono。在 Next.js 中,它可以通过 API 路由处理程序进行集成。create-t3-app 起始模板(T3 Stack)将 tRPC、Prisma、NextAuth 和 Tailwind 组合成一个全栈 Next.js 模板。
T3 Stack 是最受欢迎的 tRPC 起点,并展示了适用于生产环境的模式。
tRPC 与 OpenAPI + Zod 对比
另一种类型安全的 REST 方案是定义 Zod 模式,自动生成 OpenAPI 规范,再根据该规范生成 TypeScript 类型。这样可以提供一份非 TypeScript 客户端也能使用的 API 契约。
tRPC 更简单,但仅限 TypeScript。OpenAPI + Zod 会增加复杂性,却能生成公开的 API 契约。对于内部 TypeScript 到 TypeScript 的通信,请选择 tRPC;对于公开 API,请选择 OpenAPI。
tRPC 不适用的场景
当您需要供第三方使用的公开 API、使用其他语言编写的移动客户端,或需要稳定版本化契约的合作伙伴时,tRPC 不能替代 REST。它专门适用于拥有全栈类型安全的 TypeScript 单仓库。
理解这一适用范围,可以避免在 REST 或 GraphQL 更合适的场景中采用 tRPC。
create-t3-app 入门模板
运行 npm create t3-app@latest 会搭建一个预先配置好 Next.js、tRPC、Prisma、NextAuth.js、Tailwind CSS 和 TypeScript 的项目。生成的代码展示了路由器结构、上下文创建和客户端设置。
研究这个脚手架是了解 tRPC 各个组成部分如何在真实应用中协同工作的最快途径。
tRPC 类型共享机制
tRPC 如何在不进行代码生成的情况下,在服务器和客户端之间共享类型?
课程回顾
tRPC 通过直接导入路由器的 TypeScript 类型来共享类型,从而消除代码生成,解决 TypeScript 客户端与服务器之间的类型漂移问题。它适用于单仓库,并能与 Next.js、Express、Fastify 和 Hono 集成。T3 Stack(create-t3-app)是标准的生产级入门项目。
tRPC 仅支持 TypeScript,最适合内部全栈应用,而不适合公共 API。
用 AI 导师学习 React — 免费
在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。
- 课程
- 88
- 课程
- 324
常见问题解答
「tRPC 解决的问题」课时是免费的吗?
是的 — 「tRPC 解决的问题」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 React Academy 课程的其余内容,请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。
「tRPC 解决的问题」这节课中我会学到什么?
了解前端与后端 API 契约之间的类型偏差,以及 tRPC 如何在无需代码生成的情况下消除偏差 你通过在浏览器中直接运行的动手代码来练习 React Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗?
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 1 节课,共 4 节。
「tRPC 解决的问题」课时需要多长时间?
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗?
能。每节 React Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。