tRPC #

什么是 tRPC？ #

tRPC 是一个用于构建端到端类型安全 API 的框架，它允许你在没有 schema 定义的情况下，直接从 TypeScript 类型推导出 API 类型。通过 tRPC，你可以在前端直接调用后端函数，同时享受完整的类型安全和自动补全。

核心定位 #

text

┌─────────────────────────────────────────────────────────────┐
│                         tRPC                                 │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  类型安全    │  │  零 Schema   │  │  自动补全   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  轻量级      │  │  框架无关    │  │  开发体验   │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

为什么选择 tRPC？ #

优势 #

text

✅ 端到端类型安全
   - 前后端共享类型
   - 编译时错误检查
   - 重构安全

✅ 零 Schema 定义
   - 无需 GraphQL Schema
   - 无需 OpenAPI 定义
   - TypeScript 即 Schema

✅ 极佳开发体验
   - 完整自动补全
   - 即时类型提示
   - 无缝调试

✅ 轻量高效
   - 无代码生成
   - 最小运行时
   - 高性能

快速开始 #

安装 #

bash

npm install @trpc/server @trpc/client

服务端定义 #

typescript

import { initTRPC } from '@trpc/server';

const t = initTRPC.create();

const router = t.router;
const publicProcedure = t.procedure;

const appRouter = router({
  greeting: publicProcedure
    .input((name: string) => name)
    .query(({ input }) => `Hello, ${input}!`),
});

export type AppRouter = typeof appRouter;

客户端调用 #

typescript

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from './server';

const client = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000/trpc',
    }),
  ],
});

const result = await client.greeting.query('World');
console.log(result); // "Hello, World!"

文档结构 #

text

tRPC 文档
├── 入门基础
│   ├── tRPC 简介
│   ├── 快速开始
│   └── 路由器与过程
│
├── 核心功能
│   ├── 客户端使用
│   ├── 类型系统
│   ├── 中间件
│   └── 错误处理
│
└── 高级特性
    ├── 订阅模式
    ├── 集成框架
    └── 生产部署

tRPC vs GraphQL #

特性	tRPC	GraphQL
Schema	无需	需要
类型安全	自动	需代码生成
学习曲线	低	中
生态	TypeScript	多语言
性能	高	中

学习路径 #

text

入门阶段
├── tRPC 简介
├── 快速开始
└── 路由器与过程

进阶阶段
├── 客户端使用
├── 类型系统
├── 中间件
└── 错误处理

高级阶段
├── 高级特性
├── 集成 Next.js
└── 生产部署

下一步 #

现在你已经了解了 tRPC 的基本概念，接下来学习 tRPC 简介，开始构建类型安全的全栈应用！