tRPC End-to-End Type Safe APIs · 课时

创建第一个 tRPC 项目

逐步完成 tRPC 的安装、路由器创建和客户端连接，发起您的第一个类型安全调用。

创建第一个 tRPC 项目 是 CoddyKit 上的免费 tRPC End-to-End Type Safe APIs 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 tRPC End-to-End Type Safe APIs 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 tRPC End-to-End Type Safe APIs 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

What We Are Building

You know what tRPC is and why type safety matters. Now you'll set up a real project and make your first end-to-end type-safe call.

Installing the Packages

tRPC ships as separate server and client packages. Install them alongside Zod for validation.

npm install @trpc/server @trpc/client zod

Initializing tRPC

Create one t object with initTRPC.create() — everything else (router, procedures) is built from it.

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

const t = initTRPC.create();

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

Creating a Router

A router groups procedures. Here's a minimal one exposing a single greeting query.

export const appRouter = router({
  hello: publicProcedure.query(() => {
    return "Hello tRPC";
  }),
});

Exporting the Router Type

The core trick: export only the router's type, not its code. The client learns the full API shape with zero codegen.

export type AppRouter = typeof appRouter;

Serving the Router

Attach your router to an HTTP server using a tRPC adapter — here, the standalone createHTTPServer.

import { createHTTPServer } from "@trpc/server/adapters/standalone";

createHTTPServer({ router: appRouter }).listen(3000);

Creating the Client

The client imports the AppRouter type to unlock full autocomplete and type checking against your server.

import { createTRPCClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "./server";

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

Making the First Call

Call the procedure as if it were a local typed function — that's the whole point of tRPC.

const greeting = await client.hello.query();
console.log(greeting); // "Hello tRPC"

Type Safety in Action

Type safety in action: rename hello on the server and the client call becomes a compile error instantly — no runtime surprise.

Project Structure

A common project layout: server/trpc.ts for the t object, server/router.ts for procedures, and client/index.ts for the typed client.

Adding Inputs

Most procedures take input. Validate it with Zod and that input type flows to the client automatically.

greet: publicProcedure
  .input(z.object({ name: z.string() }))
  .query(({ input }) => "Hi " + input.name),

Quick Check

Test your setup knowledge.

Recap

Recap: you installed the tRPC packages, built a router and exported its type, and made a typed client call — a full end-to-end type-safe pipeline.

常见问题解答

「创建第一个 tRPC 项目」课时是免费的吗？

是的 — 「创建第一个 tRPC 项目」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 tRPC End-to-End Type Safe APIs 课程的其余内容，请升级到 CoddyKit PRO。 tRPC End-to-End Type Safe APIs 课程共包含 4 节课。

「创建第一个 tRPC 项目」这节课中我会学到什么？

逐步完成 tRPC 的安装、路由器创建和客户端连接，发起您的第一个类型安全调用。你通过在浏览器中直接运行的动手代码来练习 tRPC End-to-End Type Safe APIs，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 tRPC End-to-End Type Safe APIs 需要有经验吗？

无需任何先前经验。CoddyKit 上的 tRPC End-to-End Type Safe APIs 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「创建第一个 tRPC 项目」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 tRPC End-to-End Type Safe APIs 课中编写并运行代码吗？

能。每节 tRPC End-to-End Type Safe APIs 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 tRPC End-to-End Type Safe APIs