tRPC 开源项目教程
项目介绍
tRPC 是一个用于构建和消费全类型安全 API 的工具,它允许开发者轻松地创建端到端类型安全的 API,无需模式或代码生成。tRPC 的特点包括:
- 全静态类型安全:在客户端上对输入、输出和错误进行完全的静态类型安全和自动补全。
- 快速开发体验:无需代码生成,没有运行时膨胀或构建管道。
- 轻量级:tRPC 没有依赖项,客户端占用空间很小。
- 易于集成:可以轻松添加到现有的项目中。
- 包含电池:提供 React.js/Next.js/Express.js/Fastify 适配器(但 tRPC 不限于 React,还有许多社区适配器用于其他库)。
- 支持订阅:支持实时数据订阅。
- 请求批处理:同时进行的请求可以自动合并为一个。
项目快速启动
以下是一个简单的 tRPC 快速启动示例,展示了如何设置一个基本的 tRPC 服务器和客户端。
安装依赖
首先,安装 tRPC 和相关的依赖项:
npm install @trpc/server @trpc/client
创建 tRPC 服务器
创建一个 server.ts
文件:
import { initTRPC } from '@trpc/server';
import { createHTTPServer } from '@trpc/server/adapters/standalone';
const t = initTRPC.create();
const appRouter = t.router({
hello: t.procedure.query(() => {
return { message: 'Hello from tRPC!' };
}),
});
export type AppRouter = typeof appRouter;
const { port } = createHTTPServer({
router: appRouter,
createContext() {
return {};
},
}).listen(3000);
console.log(`tRPC server started on http://localhost:${port}`);
创建 tRPC 客户端
创建一个 client.ts
文件:
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';
const trpc = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: 'http://localhost:3000',
}),
],
});
async function main() {
const result = await trpc.hello.query();
console.log(result.message);
}
main();
运行服务器和客户端
在两个终端中分别运行服务器和客户端:
node server.ts
node client.ts
应用案例和最佳实践
tRPC 可以用于各种应用场景,包括但不限于:
- 全栈应用:使用 tRPC 构建前后端分离的全栈应用,确保类型安全。
- 微服务:在微服务架构中使用 tRPC 进行服务间通信,提高开发效率和类型安全。
- 实时应用:利用 tRPC 的订阅功能构建实时数据应用,如聊天应用、实时通知系统等。
最佳实践包括:
- 类型安全:始终确保客户端和服务器之间的类型安全,避免运行时错误。
- 错误处理:在客户端和服务器中都实现健壮的错误处理机制。
- 性能优化:利用 tRPC 的请求批处理功能优化性能。
典型生态项目
tRPC 的生态系统包括多个适配器和工具,以下是一些典型的生态项目:
- @trpc/server:tRPC 的服务器端库,用于创建和处理 API 路由。
- @trpc/client:tRPC 的客户端库,用于与服务器端 API 进行通信。
- @trpc/react:用于 React 应用的 tRPC 适配器,提供 hooks 和组件。
- @trpc/next:用于 Next.js 应用的 tRPC 适配器,简化集成过程。
这些工具和适配器可以帮助开发者更高效地使用 tRPC 构建类型安全的 API。