自动类型安全
在服务器端进行更改?TypeScript 会在您保存文件之前警告您客户端上的错误!
快速开发体验
tRPC 没有构建或编译步骤,这意味着没有代码生成、运行时膨胀或构建步骤。
框架无关
兼容所有 JavaScript 框架和运行时。它很容易添加到您现有的项目中。
自动补全
使用 tRPC 就像使用 API 服务器代码的 SDK 一样,让您对端点充满信心。
轻量级包大小
tRPC 没有任何依赖项,并且客户端占用空间很小,使其非常轻便。
开箱即用
我们为 React、Next.js、Express、Fastify、AWS Lambda、Solid、Svelte 等提供适配器。
ts
constt =initTRPC .create ();constrouter =t .router ;constpublicProcedure =t .procedure ;constappRouter =router ({greeting :publicProcedure .input (z .object ({name :z .string () })).query ((opts ) => {const {input } =opts ;return `Hello ${input .name }` asconst ;}),});export typeAppRouter = typeofappRouter ;
ts
constt =initTRPC .create ();constrouter =t .router ;constpublicProcedure =t .procedure ;constappRouter =router ({greeting :publicProcedure .input (z .object ({name :z .string () })).query ((opts ) => {const {input } =opts ;return `Hello ${input .name }` asconst ;}),});export typeAppRouter = typeofappRouter ;
1
定义您的过程
创建 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);
2
创建您的 HTTP 服务器
接下来,我们使用 appRouter
创建 HTTP 服务器。现在我们有一个运行的 tRPC 服务器!
tRPC 拥有许多适配器,可以满足您的需求。Next.js、Express、Fetch API(Astro、Remix、SvelteKit、Cloudflare Workers 等)、Fastify、AWS Lambda 或普通 Node HTTP 服务器。
ts
consttrpc =createTRPCClient <AppRouter >({links : [httpBatchLink ({url : 'https://127.0.0.1:3000',}),],});constres = awaittrpc .greeting .query ({name : 'John' });
ts
consttrpc =createTRPCClient <AppRouter >({links : [httpBatchLink ({url : 'https://127.0.0.1:3000',}),],});constres = awaittrpc .greeting .query ({name : 'John' });
3
连接您的客户端并开始查询!
现在服务器已运行,我们可以创建一个客户端并开始查询数据。
我们在创建客户端时传递 AppRouter
类型,以提供与后端 API 匹配的 TypeScript 自动补全和 Intellisense,而无需任何代码生成!
"我创建 tRPC 的目的是让大家能够更快地迭代通过消除对传统 API 层的需求,同时确保我们的应用程序在快速迭代过程中不会出现问题。"
亲身体验,并告诉我们您的想法!
Alex/KATT
tRPC 的创建者

Theo - ping.gg
@t3dotgg
tRPC 提升了我们代码的质量、交付速度和开发人员的幸福感,难以置信。我知道我经常吹嘘它,但说真的,请尝试一下 @trpcio

R. Alex Anderson 🚀
@ralex1993
🤯 tRPC 10 使 VS Code 的“更改所有出现位置”功能能够_跨越客户端/服务器边界_工作!在这个视频中,我使用“更改所有出现位置”重命名了一个过程输入,并且该更改会传播到整个应用程序中使用该输入的任何地方。🤩 cc @trpcio

Kent C. Dodds 🌌
@kentcdodds
如果我没有从 @remix_run 获得端到端类型安全,我一定会认真研究 @trpcio。如果您没有使用 Remix,我建议您尝试一下 👀

Sock, the dev 🧦
@sockthedev
如果您全心全意地使用 TypeScript,那么您_必须_使用 tRPC 作为您的 API。没有如果,没有但是。tRPC 打破了前端和后端之间的界限。您可以专注于为您的应用程序构建功能。最适合快速上市的工具。嫁给我 @alexdotjs 💍

Lee Byron
@leeb
听到 @t3dotgg 和 @mxstbr #tRPC 以及 @GraphQL,发现他们都认为两者都很棒,并且都有各自的应用场景 💖

Jökull Solberg
@jokull
tRPC 太棒了。我正在构建一个 Stripe 集成 - 我从服务器返回 Stripe API 负载,我得到了为我的 React 组件类型化的响应数据,甚至没有保存文件,就好像我在前端而不是后端使用 Stripe 库一样。/cc @alexdotjs

Christian Legge
@christian_legge
昨天花了一整天学习和实现 @trpcio,哇,真是物超所值。我简直不敢相信我花了多少时间(读:浪费了)验证和解析查询和响应!

Dominik 🇺🇦
@TkDodo
话虽如此,我们_正在_启动一个生产项目,我们正在使用 @nextjs 和 @trpcio。它太棒了,我甚至不知道从哪里开始 🔥。可能是从端到端类型安全开始 😍 我还没有考虑太多客户端状态,但前者可能适用。

Cory House
@housecor
@trpcio 很棒!简单、强类型。在单仓库中使用 TS 时,感觉比纯 REST 或 GraphQL 更优雅。

Anders Bech Mellson
@andersmellson
今天花了一整天玩 @trpcio v10,我彻底爱上了它 😍 ps. 别告诉我老婆 🙊

Mike | grabbou.eth 🚀
@grabbou
@t3dotgg @trpcio 完全同意。每次编写过程时我都会忍不住微笑,因为这让我回想起过去它有多难。内置错误、类型化中间件(可以修改上下文)、输入验证。这简直太棒了!

Martin
@wikitable
💖 我赞助了 @alexdotjs,因为 tRPC 帮助我更快地构建应用程序。github.com/sponsors/KATT?…
所有赞助商
我们非常感谢所有令人惊叹的 赞助商 他们帮助确保 tRPC 能够持续存在。