快速迭代，零风险。端到端类型安全 API 轻松实现。

充分发挥 TypeScript 类型推断能力，全面提升全栈应用开发效率

Star

快速入门

Supported by

22 more

Many thanks to all of our amazing sponsors!

端到端类型安全

修改了服务端代码？TypeScript 会在你保存文件前就在客户端提示错误！

流畅的开发体验

tRPC 无需构建或编译步骤，意味着没有代码生成、运行时膨胀或构建过程。

框架无关

兼容所有 JavaScript 框架和运行时环境。轻松集成到现有项目中。

自动补全

使用 tRPC 如同为 API 服务端代码配备 SDK，让你对端点充满信心。

轻量级包体积

tRPC 零依赖且客户端占用极小，极为轻量。

开箱即用

我们提供 React、Next.js、Express、Fastify、AWS Lambda、Solid、Svelte 等框架的适配器。

使用者

tRPC 已获得领先科技团队和众多财富 500 强企业的验证与信赖。

简单易用，
提供无与伦比的开发者体验

用 tRPC 快速构建类型安全的 API，轻松上手

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

ts
const t = initTRPC.create();
 
const router = t.router;
const publicProcedure = t.procedure;
 
const appRouter = router({
  greeting: publicProcedure
    .input(z.object({ name: z.string() }))
    .query((opts) => {
      const { input } = opts;
               const input: {
    name: string;
}
 
      return `Hello ${input.name}` as const;
  }),
});
 
export type AppRouter = typeof appRouter;

定义你的 procedures

创建 tRPC API 的第一步是定义你的 procedures。

Procedures 是构建后端的基础函数，具有composable特性，可以是 query、mutation 或 subscription。Routers 则包含多个 procedures。

在此 procedure 中，我们使用 Zod 验证器确保客户端输入完全符合预期格式，并通过 query 返回简单文本。

文件末尾导出 router 类型，以便稍后在前端代码中使用。

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

ts
const { listen } = createHTTPServer({
  router: appRouter,
});
 
// The API will now be listening on port 3000!
listen(3000);

创建 HTTP 服务

接下来，我们使用 appRouter 创建 HTTP 服务器。现在你已拥有一个运行中的 tRPC 服务端！

tRPC 提供多种适配器，可无缝适配你的技术栈：Next.js、Express、Fetch API（Astro/Remix/SvelteKit/Cloudflare Workers 等）、Fastify、AWS Lambda 或原生 Node HTTP 服务器。

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'http://localhost:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });

连接客户端并开始查询！

服务端运行后，我们即可创建客户端并发起数据查询。

在初始化客户端时传入 AppRouter 类型，即可获得与后端 API 完全匹配的 TypeScript 自动补全和智能提示——无需任何代码生成！

立即体验！

Node.js

React

Next.js

基于 tRPC 的最小化 Node.js 应用

Loading sandbox...

⚠️

Heads up!

WebContainers require modern Web APIs that likely aren't supported by your browser. Either open this page in a Chrome, or download this sandbox from StackBlitz and run it locally.

You can dismiss this warning to see the code, although you'll likely see unexpected errors.

Open in StackBlitz