在前端开发中，我们可能经常会涉及到和后端通过接口交互的操作。而在进行接口开发时，我们通常会使用 Protocol Buffers（简称 Protobuf）这种轻量级高效的数据序列化工具来定义接口数据结构，以便于各语言的数据交互。在使用 Protobuf 时，我们可以通过一些工具来自动生成各种语言的代码，使得我们可以方便的使用定义好的接口结构。
而在本文中，我们就来介绍一款名为 protoc-gen-ts-interfaces 的 npm 包，它可以方便的将 .proto 文件生成为 TypeScript 定义的接口代码。
安装
可以通过 npm 包管理工具来安装 protoc-gen-ts-interfaces：
npm install -g protoc-gen-ts-interfaces
使用
生成 TypeScript 接口
我们需要先编写一个 .proto 文件，用于定义我们的数据结构。假设我们有以下的一个 example.proto 文件：
syntax = "proto3";
package example;
message User {
string name = 1;
int32 age = 2;
}接着我们就可以使用 protoc-gen-ts-interfaces 工具来自动将其生成为 TypeScript 接口代码：
protoc --plugin=protoc-gen-ts-interfaces=${PATH_TO_PLUGIN} \
--tsi_out=./dest \
example.proto其中 PATH_TO_PLUGIN 为 protoc-gen-ts-interfaces 的安装路径。此命令将会生成以下的两个文件：
/* example/User.ts */
export interface User {
name?: string;
age?: number;
}/* index.ts */
import { User } from "./example/User";
const user: User = {
name: "Alice",
age: 18,
};通过这两个生成的代码文件，我们可以方便的使用 TypeScript 构建我们的接口数据。
包含指定的包名称
在上面的例子中，生成的 User 接口没有指定包名。若需要将其指定在一个特定的包中，可以使用以下方式：
-- -------------------- ---- ------- ------ - --------- ------- -------- ------ --------------------------------- ------- ---- - ------ ---- - -- -------------------------- --- - -- -
这里我们使用了一个 google.protobuf.Int32Value 类型来代替了之前的 int32 数值类型。这样一来，我们就必须指定一个特定的包名称来包含这个类型。此时我们需要执行的命令是：
protoc --plugin=protoc-gen-ts-interfaces=${PATH_TO_PLUGIN} \
--tsi_out=./dest \
--proto_path=${PROTO_PATH} \
example.proto其中 PROTO_PATH 为包含了 google/protobuf/wrappers.proto 文件的文件路径。执行该命令后，将会生成以下的代码：
/* example/User.ts */
import { Int32Value } from "google-protobuf/google/protobuf/wrappers";
export interface User {
name?: string;
age?: Int32Value;
}使用 strict 选项
protoc-gen-ts-interfaces 还提供了一个 strict 参数选项，用于在生成的代码中强制用户必须使用正确的类型标识符。可以通过传递该参数来开启该选项：
protoc --plugin=protoc-gen-ts-interfaces=${PATH_TO_PLUGIN} \
--tsi_out=./dest,strict \
example.proto这样一来，在生成的代码中类型标识符将被固定为以下形式：
/* example/User.ts */
export interface example_User {
name?: string;
age?: number;
}示例代码
接下来我们提供一个简单的 TypeScript 例子来展示 protoc-gen-ts-interfaces 的使用方式：
-- -------------------- ---- -------
--------- ---- -
----- -------
---- -------
-
--------- --------------- -
------- -------
-
--------- ----------- -
-------------- ------ -------------------------
-
-- ---------- ----- ---- ---------- --
-- ----- ------------- --
------ --------------------------------------------------- -
------------ -
-------------
------ - ----------- - ---- ------------------------
----- -------------- ---------- ----------- -
------ ----- -------------- ------ ------------------------ -
------ ---
-
-
----- ----------- - --- -----------------
----- ------ - ----- --------------------- ----- -------- ---- -- ---
--------------------通过引入通过 protoc-gen-ts-interfaces 生成的接口类型，我们就可以方便地定义我们的 TypeScript 接口，从而使得代码更加可读且可靠。
总结
protoc-gen-ts-interfaces 包提供了一个方便的工具来将 Protobuf 协议文件自动生成 TypeScript 接口代码。通过其自动生成的代码，我们可以方便地使用 TypeScript 进行更加可靠和可信赖的接口数据开发。推荐前端开发者在接口开发中使用该工具，以提升开发效率和代码可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bdc81e8991b448e586b