客户端—服务器类型推断
无需代码生成即可获得完整类型支持的客户端。
客户端—服务器类型推断 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。
共享 router 类型
client 通过导入服务器 router 的类型来获得类型安全。这是仅导入类型的操作：服务器中的任何内容都不会在 client 中运行；只有静态契约会跨越边界。
import type { AppRouter } from '../server/router';
// type-only import - erased at build time创建类型化 client
使用 createTRPCClient（或代理版本），并将 AppRouter 作为其类型参数。这样，client 对象就会镜像服务器 router 的结构，并为每个过程提供完整的自动补全。
import { createTRPCClient, httpBatchLink } from '@trpc/client';
const client = createTRPCClient<AppRouter>({
links: [httpBatchLink({ url: 'http://localhost:3000' })],
});调用过程
调用会镜像 router 树。嵌套过程 user.byId 通过 client.user.byId 访问，然后在其上调用 .query 或 .mutate。输入和输出的类型都来自服务器。
const user = await client.user.byId.query({ id: 1 });
// user is typed exactly as the server resolver returns推断的输入
client 会根据服务器模式获知每个过程的输入。在您运行应用之前，传入错误的结构就会被判定为编译错误。
await client.user.byId.query({ id: 1 }); // ok
// await client.user.byId.query({ id: 'x' }); // error: id must be number
// await client.user.byId.query({}); // error: id is required推断的输出
返回类型也会一路传回。query 解析后的值正是服务器解析器返回的值，因此下游代码也会得到完整检查。
const u = await client.user.byId.query({ id: 1 });
const name: string = u.name; // ok if server returns name: stringclient 上的 mutation
使用 .mutate 调用 mutation。同样会进行类型推断：输入由模式进行类型验证，输出类型来自解析器。
const created = await client.user.create.mutate({ name: 'Bea' });
// created is typed from the create resolver's return类型推断流程
跟踪类型的传递过程：服务器上的 zod 模式推断输入类型，解析器的返回值推断输出类型，typeof appRouter 将两者捕获到 AppRouter 中，然后 client 将该类型映射为可调用的方法。一次更改会自动传递到整个流程。
// schema -> input type
// resolver -> output type
// appRouter -> AppRouter (both captured)
// client<AppRouter> -> typed calls推断辅助类型
tRPC 提供了用于提取输入和输出类型的辅助工具，便于在 React 组件等位置复用。inferRouterInputs 和 inferRouterOutputs 可以从 AppRouter 为您提供这些映射。
import type { inferRouterOutputs } from '@trpc/server';
type Outputs = inferRouterOutputs<AppRouter>;
type User = Outputs['user']['byId'];不会发生偏离的保证
由于 client 的类型来自实时的 router 类型，服务器和 client 不会发生偏离。重命名一个过程或更改输入后，client 会在您更新调用之前无法通过编译。编译器就是您的契约测试。
// Server renames user.byId -> user.find
// client.user.byId becomes a type error immediately批处理与链接
links 数组用于配置传输方式。httpBatchLink 会将在同一个事件循环时刻发出的多个调用合并为一个 HTTP 请求，从而减少往返次数。这是一项运行时优化，不会影响类型。
links: [httpBatchLink({ url: '/trpc' })]
// Several .query calls in one tick -> one request实际应用中的端到端类型安全
最终结果是：您可以像调用本地函数一样调用 client.user.byId.query(...)，输入具有自动补全功能，参数会经过检查，结果也具有明确类型；这一切都来自服务器代码，而且无需生成文件。这就是通过类型推断实现的端到端类型安全。
const u = await client.user.byId.query({ id: 7 });
console.log(u.name); // fully typed, no codegen快速检查
测试您对 client-服务器类型推断的理解。
回顾
您已经使用完整的类型安全调用了 tRPC 接口。
- 将
AppRouter作为仅导入的类型。 createTRPCClient<AppRouter>会镜像 router 树。- 输入和输出都来自服务器模式和解析器的推断。
- client 和服务器不会发生偏离；编译器会强制执行契约。
下一步：使用上下文和 middleware 实现身份验证。
常见问题解答
「客户端—服务器类型推断」课时是免费的吗？
是的 — 「客户端—服务器类型推断」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。
「客户端—服务器类型推断」这节课中我会学到什么？
无需代码生成即可获得完整类型支持的客户端。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 TypeScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「客户端—服务器类型推断」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 TypeScript Academy 课中编写并运行代码吗？
能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。