本文详细介绍了TRPC开发入门教程，教你如何轻松搭建第一个TRPC项目。首先介绍了TRPC的基本概念、主要特点和适用场景，接着指导你搭建开发环境并安装必要的依赖。最后，通过实际操作步骤，展示了如何编写和测试TRPC服务，以及如何消费这些服务。整个过程涵盖了从环境搭建到项目部署的所有关键步骤。

TRPC是什么

TRPC（Type-Rooted RPC）是一种基于TypeScript的远程过程调用框架，它旨在提高开发效率和代码质量。TRPC使用TypeScript的类型系统来确保客户端和服务端之间的通信是类型安全的，减少了运行时错误的可能性。TRPC适用于构建现代Web应用和服务端应用，特别适合处理复杂的API接口。

TRPC的主要特点和优势

• 类型安全：TRPC利用TypeScript的类型系统，确保客户端和服务器之间的通信是类型安全的，减少了潜在的类型错误。
• 简洁优雅：TRPC的设计简洁优雅，易于上手，适合构建复杂的API服务。
• 高性能：TRPC注重性能优化，使得构建高性能的服务器端应用成为可能。
• 可扩展性：TRPC框架设计灵活，能够很好地支持未来功能扩展和版本迭代。

TRPC适合哪些场景

• 微服务架构：在微服务架构中，TRPC可以作为服务间通信的桥梁，确保各个服务间的通信是类型安全的。
• 前后端分离：在前后端分离的项目中，TRPC可以帮助构建类型安全的API，确保前端请求能够准确地与后端进行交互。
• 复杂应用开发：在处理复杂的业务逻辑和数据交互时，TRPC的类型安全特性可以显著减少开发和维护成本。

选择合适的编程语言

TRPC目前支持多种编程语言，但最常用的仍然是TypeScript和JavaScript。由于TRPC使用TypeScript进行类型定义，因此建议使用TypeScript进行开发。TypeScript是JavaScript的一个超集，它提供了类型系统，使得代码更加安全和可维护。

安装Node.js环境

首先，访问Node.js官网，下载并安装最新版本的Node.js。在安装过程中，确保安装了npm（Node Package Manager）。安装完成后，可以通过命令行验证安装是否成功：

node -v
npm -v

以上命令会返回对应的版本号，证明安装成功。

安装TRPC框架

TRPC可以通过npm安装到你的项目中。首先，确保你已经创建了一个新的Node.js项目，并且已经初始化了npm。然后，使用以下命令安装TRPC：

npm install @trpc/server @trpc/client @trpc/router @trpc/compat

初始化项目目录

首先，在命令行中创建一个新目录，并进入该目录。接着，初始化一个新的Node.js项目：

mkdir my-trpc-project
cd my-trpc-project
npm init -y

添加TRPC依赖

安装TRPC依赖库，如上一节所述，使用npm安装TRPC：

npm install @trpc/server @trpc/client @trpc/router @trpc/compat

配置项目的基本结构

在项目根目录下，创建如下目录结构：

my-trpc-project/
├── api/
│   ├── index.ts
│   └── router.ts
├── client.ts
└── server.ts

其中，api/目录将包含服务端相关的代码，client.ts将包含客户端代码，server.ts将包含服务器启动代码。

在api/目录下，创建index.ts和router.ts文件。在index.ts中，导入@trpc/server和@trpc/router，并定义你的API路由器。

// api/index.ts
import { createRouter } from './router';

export const appRouter = createRouter();

在router.ts中，定义你的服务端路由：

// api/router.ts
import { createRouter, httpBatchLink } from '@trpc/client';
import superjson from 'superjson';

export const createRouter = () => {
  return createRouter()
    .query('helloWorld', {
      resolve: () => ({
        message: 'Hello World',
      }),
    });
};

定义服务端接口

在api/router.ts中定义服务端接口。这里定义了一个简单的查询接口helloWorld，它返回一个包含消息的结构体。

// api/router.ts
import { createRouter, httpBatchLink } from '@trpc/client';
import superjson from 'superjson';

export const createRouter = () => {
  return createRouter()
    .query('helloWorld', {
      resolve: () => ({
        message: 'Hello World',
      }),
    })
    .mutation('addMessage', {
      input: (input) => {
        return {
          message: input.message,
        };
      },
      resolve: ({ input }) => {
        return {
          result: `Added message: ${input.message}`,
        };
      },
    });
};

实现服务端逻辑

在server.ts文件中，实现服务端逻辑。首先，导入appRouter和@trpc/server，然后创建一个服务器实例并启动它。

// server.ts
import { createServerHandler } from '@trpc/server/adapters/next';
import { appRouter } from './api';

const createContext = () => ({});

export const handler = createServerHandler({
  router: appRouter,
  createContext,
});

export default function api(req, res) {
  return handler(req, res);
}

测试服务端接口

启动服务器并测试服务端接口。首先，运行以下命令启动服务器：

npx nodemon server.ts

然后，使用浏览器或者Postman访问http://localhost:3000/api/helloWorld。你应该能看到返回的JSON数据：

{
  "message": "Hello World"
}

创建客户端

在client.ts文件中，创建一个客户端来消费服务端的接口。

// client.ts
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import superjson from 'superjson';

const createClient = () => {
  return createTRPCProxyClient({
    links: [
      httpBatchLink({
        url: 'http://localhost:3000/api', // 请根据实际情况修改URL
        headers() {
          return {
            'Content-Type': 'application/json',
          };
        },
      }),
    ],
    transformer: superjson,
  });
};

export const client = createClient();

调用服务端接口

调用服务端的接口。使用客户端提供的方法来调用服务端的helloWorld接口。

// client.ts
import { client } from './client';

client.helloWorld.query().then((res) => {
  console.log(res.message); // 输出: Hello World
});

client.addMessage.mutation({ message: 'Test message' }).then((res) => {
  console.log(res.result); // 输出: Added message: Test message
});

处理客户端请求和响应

当客户端请求服务端接口时，客户端会发送一个请求并接收响应。客户端代码通常会处理响应，例如打印响应内容或根据响应内容执行后续操作。

在上述示例中，客户端请求helloWorld接口并打印返回的消息，同时调用addMessage接口并打印结果。

部署TRPC服务

部署TRPC服务时，可以将服务打包并部署到云服务器或使用容器化技术（如Docker）进行部署。以下是使用Docker部署TRPC服务的基本步骤：

1. 创建Dockerfile，定义镜像的基础环境和应用运行环境。
2. 构建Docker镜像。
3. 使用Docker容器运行服务。

创建Dockerfile

在项目根目录下创建Dockerfile文件：

# 使用官方Node.js镜像作为基础镜像
FROM node:14

# 设置工作目录
WORKDIR /app

# 复制package.json和package-lock.json
COPY package*.json ./

# 安装项目依赖
RUN npm ci

# 复制应用代码
COPY . .

# 暴露端口
EXPOSE 3000

# 启动应用
CMD ["node", "server.ts"]

构建Docker镜像

在命令行中执行以下命令来构建Docker镜像：

docker build -t my-trpc-service .

运行Docker容器

使用以下命令来运行Docker容器：

docker run -p 3000:3000 my-trpc-service

调试常见问题

在开发过程中，可能会遇到各种问题，例如服务端未启动，客户端请求失败等。以下是一些常见的调试技巧：

1. 检查网络连接：确保客户端能够访问服务端。
2. 检查日志信息：查看服务端和客户端的日志，寻找错误信息。
3. 使用调试工具：使用Postman或浏览器的开发者工具来调试HTTP请求。

日志和监控设置

为了更好地管理和维护TRPC服务，配置日志和监控是非常重要的。以下是基本的日志和监控配置步骤：

1. 日志配置：使用winston或log4js等库来配置日志。
2. 监控配置：使用Prometheus和Grafana来监控服务的运行状态。

配置日志

在server.ts中配置日志：

import { createLogger, transports } from 'winston';

const logger = createLogger({
  transports: [
    new transports.Console(),
    new transports.File({ filename: 'app.log' }),
  ],
});

logger.info('Application started');

配置监控

添加Prometheus监控：

// server.ts
import { createServerHandler } from '@trpc/server/adapters/next';
import { appRouter } from './api';
import { createMetricsHandler } from '@trpc/server/otlp';

const metricsHandler = createMetricsHandler({
  router: appRouter,
  createMetricsHandler: (metrics) => {
    return (req, res) => {
      metrics.setHandler(req, res);
    };
  },
});

export default function api(req, res) {
  return createServerHandler({
    router: appRouter,
    createMetricsHandler: metricsHandler.createMetricsHandler,
  })(req, res);
}

通过以上步骤，你可以轻松搭建并调试你的第一个TRPC项目。希望这篇教程对你有所帮助！