Protoc生成gRPC Web客户端TS代码时缺失*_grpc_pb.d.ts如何处理？

结论 #

你的第二套service=grpc-web配置完全正确，不需要额外生成*_grpc_pb.d.ts文件。

生成文件差异说明 #

• *_grpc_pb.d.ts是Node.js环境下原生gRPC客户端专用的类型定义文件，仅当你在Node服务/桌面端调用gRPC接口时才需要，浏览器环境运行的gRPC Web客户端完全不兼容该文件的导出内容
• *_pb_service.d.ts就是gRPC Web场景下对应的服务端类型定义，配合生成的*_pb.js（消息序列化逻辑）、*_pb.d.ts（消息类型定义）即可完成前端gRPC Web客户端的调用开发

配置优化建议 #

你可以把两次protoc调用合并为一次，简化生成流程：

PROTOC_GEN_TS_PATH="./node_modules/.bin/protoc-gen-ts"
GRPC_TOOLS_NODE_PROTOC_PLUGIN="./node_modules/.bin/grpc_tools_node_protoc_plugin"
GRPC_TOOLS_NODE_PROTOC="./node_modules/.bin/grpc_tools_node_protoc"
OUT_DIR="./_protos_/proto/"

${GRPC_TOOLS_NODE_PROTOC} \
    --plugin=protoc-gen-grpc="${GRPC_TOOLS_NODE_PROTOC_PLUGIN}" \
    --plugin=protoc-gen-ts="${PROTOC_GEN_TS_PATH}" \
    --js_out=import_style=commonjs,binary:"${OUT_DIR}" \
    --ts_out="service=grpc-web:${OUT_DIR}" \
    -I "${OUT_DIR}" \
    "${OUT_DIR}"/*.proto

额外注意事项 #

Go原生gRPC服务无法直接接收gRPC Web请求，需要在后端前置一层gRPC Web代理（常用方案为Envoy、官方grpcwebproxy）做协议转换，前端才能正常调用接口。

内容的提问来源于stack exchange，提问作者Phil Lucks