在前端开发中，一般会涉及到与后端进行数据交换和通讯，而协议的制定和解析是其中核心的一环。Google 的 Protobuf 已经在各个领域有着广泛的应用，正因如此，我们有必要在前端也使用起 Protobuf。基于 Protobuf 的 TypeScript 代码生成器 ts-protoc-gen，它可以将 Protobuf 的 .proto 文件转换成 TypeScript 类型的定义文件。本文将详细介绍如何使用 npm 包 ts-protoc-gen，包括项目配置、Proto 文件的编写与解析，以及代码的生成和使用。
安装 ts-protoc-gen
首先，我们需要安装 ts-protoc-gen，这可以通过 npm 直接进行安装，包括安装到全局或是项目的开发依赖中，建议选用后者。
npm install ts-protoc-gen --save-dev
安装完成后，我们可以在项目的 package.json 中查看 ts-protoc-gen 的版本信息，例如：
{
"devDependencies": {
"ts-protoc-gen": "^0.14.2"
}
}编写 Proto 文件
Proto 文件是由 Google 开发的一种协议，它可以定义消息类型、服务等内容，并支持数据序列化和反序列化，被广泛应用于各种语言的开发之中。在前端应用程序中，我们主要用它来定义数据结构，尤其是在与后端进行数据交换过程中。
在简单的 Proto 文件中，我们需要定义数据的字段类型、名称、序号等信息。例如，下面的代码段演示了一个用来描述 hello 消息的 Proto 定义：
-- -------------------- ---- ------- ------ - --------- ------- ------------ - ------ ---- - -- - ------- ------------- - ------ ------- - -- -
上面这段代码中，首先声明了该 Proto 版本是 proto3，然后定义了两个消息类型 HelloRequest 和 HelloResponse。在两个消息类型中，我们分别用字段来定义数据类型，例如字符串和数字，以及名称和序号。这些信息将用于后续生成 TypeScript 代码时进行参考。
生成 TypeScript 代码
有了符合要求的 Proto 文件之后，我们可以使用 ts-protoc-gen 工具来生成对应的 TypeScript 代码。在命令行中，执行以下命令：
npx pbjs -t json -p . --keep-case hello.proto > hello.json && npx pbts -o hello.d.ts hello.json
以上命令将使用 pbjs 工具将 .proto 文件编译成 JSON 格式的文件，然后使用 pbts 工具将 JSON 文件转化为 TypeScript 的声明文件（.d.ts）格式。
如果您使用了较新的 proto3 版本，在上述命令中，您需要指定生成代码的包名，例如：
npx pbjs -t json -p . --keep-case hello.proto > hello.json && npx pbts -o hello.d.ts --export --wrap long --keep-case --package hello hello.json
在上述命令中，--package 选项用于指定 Proto 文件中定义的包名，--export 选项用于导出 TypeScript 模块，--wrap long 选项用于避免在浏览器端出现 long 类型的错误，--keep-case 选项用于保留字段名称的大小写。
使用生成的 TypeScript 代码
在生成 TypeScript 定义文件的同时，ts-protoc-gen 还会同时生成对应的 JavaScript 版本的代码（.js）。我们只需要在 TypeScript 项目中导入定义文件即可使用生成的代码。例如，我们可以按如下方式使用上述例子中的 HelloRequest 类型：
import { HelloRequest } from './hello';
const request: HelloRequest = {
name: 'World',
};在以上例子中，我们通过 import 引入了定义文件中定义的 HelloRequest 类型，并使用该类型定义了 request 对象。这样，我们就可以在 TypeScript 项目中使用 Protocol Buffers 协议定义的数据结构和服务了。
祝成功！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/80503