对 Web 请求的 TypeScript 封装 2.0 版：解决全部痛点！

前端

2023-12-29 21:05:38

前言

在上一篇文章《封装》中，我们介绍了如何将 gRPC 封装成 TypeScript，使其能够在 Web 请求中使用。这种封装方案已经可以在实践中使用了，但是还存在两处不完美的地方：

复杂类型入参的处理：如果请求的入参是复杂类型（如对象、数组等），则需要对入参进行序列化和反序列化。这可能会导致代码变得复杂且难以维护。
必须传入 requestClass：在封装后的 gRPC 函数中，必须传入 requestClass 参数。这可能会导致代码变得冗长且难以阅读。

针对这两个痛点，我们在本文中提出了改进方案，使其更加完善和易于使用。

改进方案

1. 解决复杂类型入参的处理

为了解决复杂类型入参的处理问题，我们引入了一个新的库：protobufjs。这个库可以帮助我们轻松地将复杂类型序列化和反序列化为 JSON 字符串。

在使用 protobufjs 库之前，我们需要先安装它：

npm install protobufjs

安装完成后，我们就可以在代码中使用它了。

封装过程：

使用 protobufjs 库将复杂类型序列化为 JSON 字符串。
将 JSON 字符串作为入参传入到 gRPC 函数中。
在 gRPC 函数中，使用 protobufjs 库将 JSON 字符串反序列化为复杂类型。

封装后的函数：

const sayHello = (request: { name: string }, callback: (error: Error | null, response: { message: string }) => void): void => {
  const requestJSON = protobufjs.Root.fromJSON(request).toJSON();
  grpcClient.sayHello(requestJSON, (error, response) => {
    if (error) {
      callback(error, null);
      return;
    }
    const responseJSON = protobufjs.Root.fromJSON(response).toJSON();
    callback(null, responseJSON);
  });
};

2. 解决必须传入 requestClass 的问题

为了解决必须传入 requestClass 的问题，我们使用了一个新的语法糖：as。

在使用 as 语法糖之前，我们需要先安装 typescript-rest 库：

npm install typescript-rest

安装完成后，我们就可以在代码中使用它了。

使用过程：

在 gRPC 函数的参数列表中，使用 as 语法糖来指定 requestClass。

封装后的函数：

const sayHello = (request: proto.helloworld.HelloRequest as any, callback: (error: Error | null, response: proto.helloworld.HelloReply) => void): void => {
  grpcClient.sayHello(request, callback);
};