快速移動，絕不中斷。輕鬆建立端到端類型安全的 API。

體驗 TypeScript 推論的強大功能，提升生產力
適用於您的全端應用程式。

星號

快速入門

由以下單位支援

29 more

非常感謝所有贊助商的鼎力支持！

自動類型安全

進行伺服器端變更？TypeScript 會在您儲存檔案之前，警告您客戶端上的錯誤！

靈敏的 DX

tRPC 沒有建置或編譯步驟，表示沒有程式碼產生、執行時期膨脹或建置步驟。

與框架無關

相容於所有 JavaScript 框架和執行時期。很容易將它新增到您現有的專案。

自動完成

使用 tRPC 就如同使用 API 伺服器程式碼的 SDK，讓您對端點充滿信心。

程式包大小輕巧

tRPC 沒有任何依賴項，且客戶端佔用空間極小，因此非常輕巧。

內建電池

我們提供 React、Next.js、Express、Fastify、AWS Lambda、Solid、Svelte 等的轉接器。

使用簡單，擁有
無與倫比的開發人員體驗

使用 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;

定義您的程序

建立 tRPC API 的第一步，是定義您的程序。

程序是我們用來建置後端的函數。它們是可組合的，可以是查詢、突變或訂閱。路由器包含多個程序。

在此程序中，我們使用 Zod 驗證器，以確保來自客戶端的輸入與我們的程序預期完全相同。我們也會從查詢傳回一個簡單的文字字串。

在檔案的結尾，我們匯出路由器的類型，以便我們可以在前端程式碼中使用它，只需幾分鐘。

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: 'https://127.0.0.1:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });
      
const res: `Hello ${string}`

ts
const trpc = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: 'https://127.0.0.1:3000',
    }),
  ],
});
 
const res = await trpc.greeting.query({ name: 'John' });
      
const res: `Hello ${string}`