Typescript 全栈最值得学习的技术栈 TRPC

TRPC 是一种用于 TypeScript 的全栈远程过程调用（RPC）库。它提供了客户端和服务器之间的强类型通信，以及服务端的强类型代码生成。

以下是一个简单的例子，展示如何使用 TRPC 创建一个简单的服务端和客户端。

首先，安装 TRPC 相关依赖：

npm install trpc

服务端代码 (trpc-server.ts):

import { TRPCError } from '@trpc/server';
import { createRouter } from '@trpc/server/router';
import { createHTTPServer } from '@trpc/server/adapters/HTTP';
 
// 创建 RPC 路由
const router = createRouter().query('hello', {
  input: {
    text: {
      kind: 'string',
      description: 'Text to say hello to',
    },
  },
  async resolve({ input }) {
    if (!input.text) {
      throw new TRPCError({ code: 'BAD_REQUEST', message: 'No text provided' });
    }
    return `Hello, ${input.text}!`;
  },
});
 
// 创建 HTTP 服务器
const server = createHTTPServer({
  router,
  // 可以在这里添加中间件等
});
 
// 启动服务器
server.start(8080);

客户端代码 (trpc-client.ts):

import { TRPCClient } from '@trpc/client';
 
// 创建 TRPC 客户端
const client = new TRPCClient({
  url: 'http://localhost:8080/trpc',
});
 
async function main() {
  try {
    const result = await client.query('hello', { text: 'World' });
    console.log(result); // 输出: Hello, World!
  } catch (error) {
    console.error(error);
  }
}
 
main();

在这个例子中，服务端定义了一个名为 hello 的查询方法，接受一个字符串参数 text。客户端连接到服务端，并调用 hello 方法，传递参数，然后打印结果。

这只是一个简单的例子，TRPC 提供了更多高级功能，如中间件、认证、并发控制等，以及与现代前端框架（如 React、Vue 或 Svelte）的集成。