tRPC 全栈类型安全实践

tRPC 全栈类型安全实践概述tRPC 通过 TypeScript 类型推断在服务端与客户端之间共享契约，无需生成代码或写额外的 API 层。本文基于 v10 稳定 API 展示定义、调用与 SSR 集成。服务端路由定义// server/trpc.ts

import { initTRPC } from '@trpc/server'

const t = initTRPC.create()

export const appRouter = t.router({

hello: t.procedure.query(() => ({ message: 'Hello tRPC' })),

add: t.procedure.input(z.object({ a: z.number(), b: z.number() })).mutation(({ input }) => ({ sum: input.a + input.b })),

})

export type AppRouter = typeof appRouter

Next.js 客户端集成// utils/trpc.ts

import { createTRPCReact } from '@trpc/react-query'

import type { AppRouter } from '../server/trpc'

export const trpc = createTRPCReact<AppRouter>()

// app/page.tsx（客户端组件片段）

import { trpc } from './utils/trpc'

export default function Page() {

const hello = trpc.hello.useQuery()

const add = trpc.add.useMutation()

return (

<div>

<p>{hello.data?.message}</p>

<button onClick={() => add.mutate({ a: 1, b: 2 })}>Add</button>

</div>

)

}

服务器端直接调用（SSR）// server/caller.ts

import { appRouter } from './trpc'

export const caller = appRouter.createCaller({ /* 上下文 */ })

const data = await caller.hello()

验证要点API 与用法基于 v10 稳定版本；类型推断贯穿服务端/客户端调用。在 SSR/客户端均可一致运行，避免额外的代码生成步骤与维护成本。