End-to-End Type Safety

tRPC

无需 Schema 定义，TypeScript 类型自动在前后端流转

革命性的 API 开发方式——后端函数签名直接成为前端类型。告别 API 文档、REST 设计和 GraphQL Schema，极速全栈 TypeScript 开发的终极利器。

tRPC v11 TypeScript Next.js 15 Zod TanStack Query WebSocket React Prisma

开始学习 → 查看目录

为什么选择 tRPC

🔗

零 Schema，全类型

后端 TypeScript 类型直接流向前端，无需任何代码生成步骤，类型变更即时同步

⚡

极速开发体验

IDE 自动补全贯穿前后端，接口调用错误在编译期发现，彻底杜绝运行时类型错误

🛡️

Zod 输入验证

深度集成 Zod，一次定义同时完成运行时验证和 TypeScript 类型推断

🔄

TanStack Query 集成

@trpc/react-query 无缝集成，自动获得缓存、后台刷新、乐观更新等能力

🌊

实时订阅支持

基于 WebSocket 的 Subscription Procedure，轻松实现实时通知、聊天等功能

🔌

框架无关适配器

支持 Next.js App Router、Express、Fastify、AWS Lambda 等多种运行环境

课程目录 · 10 章

tRPC 核心理念

端到端类型安全的本质、tRPC vs REST vs GraphQL、工作原理与适用场景

›

服务端基础——Router 与 Procedure

initTRPC、Query/Mutation/Subscription、Router 合并、AppRouter 类型导出

›

输入验证（Zod 深度集成）

input/output Schema、Zod 类型详解、自定义错误消息、实战用户注册验证

›

Context 与认证

createContext、Middleware、Protected Procedure、NextAuth 集成、JWT 认证

›

客户端集成（React + TanStack Query）

TRPCProvider 配置、useQuery/useMutation、乐观更新、完整 CRUD 页面实战

›

Next.js App Router 集成

fetchRequestHandler、Server Component 直调、Route Handler 配置、脚手架实战

›

订阅与实时通信

Subscription Procedure、WebSocket 适配器、SSE、实时通知系统实战

›

中间件进阶

中间件链、日志/缓存/限流中间件、Procedure Builder 模式封装通用逻辑

›

测试策略

caller 单元测试、集成测试、Mock Context、类型测试、Playwright E2E

›

生产最佳实践

路由拆分、错误格式化、OpenTelemetry、批量请求、文件上传、从 REST 迁移策略

›

学习目标

🔗

理解端到端类型安全

深入理解 tRPC 如何利用 TypeScript 类型系统实现前后端零成本类型共享

🛡️

掌握认证与中间件

使用 Context 和 Middleware 构建健壮的认证体系，实现细粒度权限控制

⚛️

React 全栈集成

熟练使用 @trpc/react-query，实现流畅的前端数据流与乐观 UI 更新

🌊

实时功能开发

基于 WebSocket Subscription 构建实时通知、聊天等实时协作功能

🧪

完整测试覆盖

从单元测试到 E2E 测试，建立可靠的 tRPC 应用测试体系

🚀

生产级部署

掌握路由组织、错误处理、可观测性、批量优化等生产环境最佳实践

前置要求

需要掌握

TypeScript 基础类型系统
React Hooks（useState、useEffect）
基础 HTTP / REST API 概念
Node.js 运行环境基础
Next.js 基础路由概念（推荐）

开发环境

Node.js 20 LTS 或更高版本
VS Code + TypeScript 插件
pnpm 包管理器（推荐）
Git 版本控制工具
PostgreSQL / SQLite 数据库