前言
Protobuf（Protocol Buffers）是 Google 推出的一种轻量级、高效的序列化数据结构。它比 JSON 和 XML 更快、更小、更简单，可用于数据存储、通信协议等场景。而 protobufts 是一个基于 Protobuf 的 npm 包，用于生成 TypeScript 类型和 API 客户端，可以提高前端开发的效率，避免手写大量的请求配置和数据转换的代码。
在本篇文章中，我们将介绍 protobufts 的基本使用方法和常用功能，帮助读者快速上手使用 protobufts，并展示一些实际的示例。
安装
在使用 protobufts 前，需要先安装它。可以使用 npm 安装 protobufts
npm install protobufts
基本使用
首先需要了解一些 Protobuf 的基本概念。在 Protobuf 中，定义一个消息的格式是通过 Protobuf IDL（Interface Description Language）文件进行的。接下来是一个简单的例子：
syntax = "proto3";
message Person {
string name = 1;
int32 age = 2;
}在上面的例子中定义了一个 Person 对象，它由一个字符串类型的 name 和一个整型的 age 组成。对于 IDL 文件，我们可以使用 protoc 工具编译成对应的代码文件，然后通过这些代码文件生成 TypeScript 类型和 API 客户端。
生成 TypeScript 类型
首先需要将 IDL 文件编译成对应的代码文件。对于 TypeScript 类型来说，可以使用 protoc-gen-ts 工具生成。这里假设 IDL 文件名为 person.proto，将其编译为 person.ts 文件，可以执行以下命令：
npx protoc --plugin=protoc-gen-ts=node_modules/.bin/protoc-gen-ts --proto_path=. --ts_out=. person.proto
执行完命令后，就会在当前目录下生成 person.pb.ts 文件，里面包含了 TypeScript 类型的声明。
生成 API 客户端
对于 API 客户端来说，可以使用 protoc-gen-grpc-web 工具生成。这里同样假设 IDL 文件名为 person.proto，生成的客户端代码文件为 person.ts，可以执行以下命令：
npx protoc --plugin=protoc-gen-grpc-web=node_modules/.bin/protoc-gen-grpc-web --proto_path=. --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. person.proto
执行完命令后，就会在当前目录下生成 person.pb.d.ts 文件，里面包含了 API 客户端的声明。
使用 TypeScript 类型
生成了 TypeScript 类型后，我们可以在 TypeScript 代码中直接使用这些类型。以下是一个使用 Person 类型的示例：
import { Person } from "./person.pb";
const person = new Person();
person.setName("Tom");
person.setAge(18);
console.log(person.getName()); // output: Tom
console.log(person.getAge()); // output: 18这里使用 Person 类型创建了一个 person 对象，然后通过 setName 和 setAge 方法设置了它的值，最后通过 getName 和 getAge 方法获取了它的值。正如上面提到的，这些方法都是由生成的 TypeScript 类型提供的。
使用 API 客户端
生成了 API 客户端后，我们可以在前端代码中通过它来请求服务器端的接口。以下是一个使用 API 客户端的示例：
-- -------------------- ---- -------
------ - ------------------- - ---- --------------
----- ------ - --- ---------------------------------------------
----- ------- - --- -------------------
-----------------------
------------------------- --- ----- --------- -- -
-- ----- -
-------------------
- ---- -
---------------------------------
-
---这里使用 PersonServiceClient 对象创建了一个 client 客户端，然后通过 GetPersonRequest 类型创建了一个 request 请求。最后通过 client 客户端的 getPerson 方法来向服务器端发送请求，请求参数是 request，响应参数是 response。请求成功后，可以通过 response.toObject() 方法将响应数据转换为 JavaScript 对象。
常用功能
除了基本的功能外，protobufts 还支持一些常用的功能，下面我们将介绍其中比较常见的三个功能：使用自定义选项、使用 gRPC Web 的特性、使用 Promise 风格的 API。
使用自定义选项
Protobuf 允许定义自定义选项，可以用来控制 Protobuf 编译器的行为。在实践中，比较常见的是使用自定义选项来控制生成的代码的内容或者文件名称等。以下是一个自定义选项的例子：
syntax = "proto3";
option my_option = "hello";
message Person {
string name = 1 [(my_option) = "world"];
int32 age = 2;
}在上面的例子中，定义了一个名为 my_option 的自定义选项，它的值为 "hello"。在 Person 消息中，name 域上定义了一个 my_option 的选项，它的值为 "world"。
通过 protoc 命令生成 TypeScript 类型和 API 客户端时，我们可以使用 --ts_opt 和 --grpc-web_opt 选项来传递自定义选项。以下是一个使用自定义选项的命令示例：
npx protoc --plugin=protoc-gen-ts=node_modules/.bin/protoc-gen-ts --ts_out=. --ts_opt="my_option=value" person.proto npx protoc --plugin=protoc-gen-grpc-web=node_modules/.bin/protoc-gen-grpc-web --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. --grpc-web_opt="my_option=value" person.proto
使用 gRPC Web 的特性
gRPC Web 是一个针对浏览器和移动端的 gRPC 客户端实现。与 gRPC 不同的是，gRPC Web 使用 HTTP/2 和二进制协议 Buffer 的方式进行通信。在 protobufts 中，我们可以使用 --js_out=import_style=commonjs:. 和 --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. 选项来生成 gRPC Web 的代码。
使用 gRPC Web 时，可以使用 grpc-web npm 包提供的 grpc.invoke 方法来发起请求。以下是一个使用 gRPC Web 的示例：
-- -------------------- ---- -------
------ - ------------------- - ---- --------------
------ - ---- - ---- ------------------
----- ------ - --- ----------------------- ----
----- ------- - --- -------------------
-----------------------
------------------------------------ -
-------- --------
----- ------------------------
---------- --------- ---- -- -
--------------------------------
--
------ ------ ---------- -------- ------ - ---------- --------- ---- -- -
-- ----- --- ------------- -
------------------- -------- ----------
-
-
---使用 Promise 风格的 API
protobufts 还支持使用 Promise 风格的 API，可以让代码更易读。以下是一个使用 Promise 风格的 API 的示例：
-- -------------------- ---- ------- ------ - -------------------------- - ---- -------------- ----- ------ - --- ------------------------------ ---- ----- ------- - --- ------------------- ----------------------- --------------------------------------- -- - --------------------------------- -------------- -- - --------------------- ---
此示例中，我们通过 PersonServicePromiseClient 创建了一个客户端，并使用 getPerson 方法发送请求。使用 Promise 风格的 API 时，我们不用回调函数，而是可以直接使用 then 方法和 catch 方法来处理请求成功和失败的情况。
结论
本篇文章介绍了 npm 包 protobufts 的使用方法和常见功能。通过 protobufts 可以轻松生成 TypeScript 类型和 API 客户端，避免了手写大量的请求配置和数据转换代码的问题。希望本篇文章能够帮助你快速上手 protobufts，并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a8c81e8991b448d80ba