审校 | 重楼
在近期关注的技术趋势中，一种名为tRPC的技术架构引起了我的注意，它被广泛应用于包括T3在内的多种现代技术堆栈中。然而，对于tRPC的本质及其广受欢迎的原因，我并不清楚。
我开始研究和学习它。我不知道它的意思或目的是什么。所以，我深入研究了RPC、gRPC和其他技术来寻找答案。
我发现tRPC是一种用于设计API的类型安全架构风格。但该定义只是冰山一角，仅仅揭示了其深层内涵的一小部分。
在本文中，我期望能够更为深入地探究这座冰山的根源所在，明晰 tRPC 究竟是何种事物。本文针对 tRPC 展开了深度阐释，涵盖了我们为何需要它以及如何对其进行使用等方面。
请注意，作为这篇文章的撰写者，我是基于自身已有的研究成果，首次与你一同探究tRPC。此次探索主要面向初学者及新学者，现在就让我们一同深入其中。
先决条件
- 中级JavaScript知识
- 基本的TypeScript知识
- 中级React知识
- Fetch和REST API的使用经验
- 使用终端或控制台的经验
- 使用NPM及其命令的经验
- 使用CORS以及连接前端/后端的经验
- 热衷于学习新知识
你可以在此处找到本文的GitHub库和所有其他资源。
目录
- 什么是tRPC?
- 为什么我们需要tRPC?
- 如何使用tRPC
- 结论
什么是tRPC?
tRPC是一个基于TypeScript的类型安全库，它利用RPC API设计来处理API请求并交付响应。
RPC代表远程过程调用。我们的tRPC建立在RPC之上。RPC是一种设计API(如REST)的架构风格。使用RPC，你可以摆脱Fetch和REST API。
顾名思义，tRPC在RPC架构设计上添加了一个类型安全层。传统上，我们使用REST API。它包含GET、POST、PULL等请求类型。在tRPC中，没有请求类型。
每个对tRPC后端的请求都会通过查询系统，并根据输入和查询从tRPC后端获得响应。
相反，tRPC和react-query提供了内置函数来处理你的请求。每个请求都会得到相同的处理。这取决于API端点是否接受输入、输出、修改等。
使用REST时，你会创建一个名为/api 的主文件夹，并在其中创建路由文件。但对于tRPC，你不需要包含许多文件的文件夹。你只需要几个内置函数和一个简化的react-query(反应查询)系统。
你无需使用fetch()、处理输出等。tRPC使用表示特定查询的URL进行操作，你将很快会看到。
为什么我们需要tRPC?
tRPC确保RPC类型的安全。这表示客户端无法向服务器发送与其预期不匹配的数据类型。例如，客户端无法为基于数字的属性传递字符串。
如果客户端尝试这样做，系统将立即返回错误提示-无效类型。若数据类型不匹配，集成开发环境(IDE)和浏览器将同步抛出错误。
类型安全是确保JavaScript应用程序稳定性和可靠性的关键要素。tRPC框架正是利用TypeScript的强类型特性，极大地简化了后端路由的创建和操作执行过程。
tRPC的实现依赖于名为Zod的库。它为构建每个路由的数据模式提供了支持。所谓模式，是定义了属性且链接到每个属性的等效数据类型的对象。
例如，在需要用户详细信息的API路由中，开发人员将在后端定义一个对象，并利用Zod为该对象的每个属性指定相应的数据类型。
在前端，tRPC负责验证用户或API请求所提供的数据是否与后端注册的数据类型相匹配，从而在前端和后端之间实现了类型安全的集成。
接下来，我们将探讨tRPC、Zod以及其他相关库如何在演示项目中协同工作，以实现这一类型安全的集成。
如何使用tRPC
tRPC提供了一种高效的方式来快速搭建Express服务器并开发tRPC路由和查询。其简洁的API设计使得开发过程变得直观且易于上手。
在传统的Wb应用架构中，客户端(前端)和服务器端(后端)通常是分离的。本文示例将遵循这种架构模式，分别构建前后端系统。
让我们首先使用React创建客户端，使用Express+CORS创建服务器端来连接它们。
文件夹结构
首先，创建一个名为tRPC Demo的主目录。在该主目录中，再创建另一个名为trpclibrary的子目录，用于分离客户端和服务器端代码，并为后续作为统一库进行管理做准备。
在trpclibrary目录中，你将很快放置服务器端(Express)和客户端(React)的代码。
在tRPC Demo根目录中，插入带有以下代码的package.json文件，作用是连接所有的子文件夹，并允许通过单一命令同时运行客户端和服务器端。
{
"name": "trpclibrary",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"scripts": {
"start": "concurrently \"wsrun --parallel start\""
},
"workspaces": [
"trpclibrary}
{}
);现在，你将使用React Query打包AppComponent组件，并在该文件中传递你通过调用QueryClient( )创建的React Query客户端实例。然后，你将利用tRPC Provider打包React Query Provider。
The tRPC Provider 需要React Query客户端和带有Base URL的tRPC客户端。因此，我们也将提供该信息。
一旦你传递了所需信息并确保代码与我们的代码相匹配，你就可以访问http://localhost:3000并查看输出。该页面将显示你通过hello API端点传递的数据。
注意：你应该在tRPC Demo目录下运行yarn start命令，打开localhost端口以查看输出结果。
输出图像
我们已经准备就绪。tRPC允许我们从前端调用hello API端点。它优先考虑类型安全，并采用TypeScript来避免数以百万计的其他JavaScript可能带来的问题。
你可以在Route处理程序中添加更多路由和API端点，比如hello。这就像给对象添加新属性一样简单。tRPC就是这样让你的开发工作变得更加轻松。
结论
tRPC是一个类型安全的RPC样式库。它将RPC与TypeScript深度集成，旨在消除REST、fetch( )和其他创建和调用API的技术所带来的问题。
它作为REST和Fetch的替代方案。我将在可预见的未来继续使用它。
译者介绍
刘涛，51CTO社区编辑，某大型央企系统上线检测管控负责人。
文章What is the tRPC Library? Explained with a Demo Project (freecodecamp.org)，作者：Afan Khan
