如何从Proto文件生成包含gRPC服务的TypeScript文件？

你当前使用的proto-loader-gen-types工具仅负责生成TypeScript类型定义，不会产出可直接调用的gRPC服务客户端/服务端实现代码。要生成开发所需的核心gRPC代码，需要通过protoc编译器搭配TypeScript及gRPC专用生成插件来完成，步骤如下：

1. 安装必要依赖 #

先补充安装所需的工具包：

yarn add -D grpc-tools ts-protoc-gen google-protobuf @grpc/grpc-js

• grpc-tools：包含protoc编译器及gRPC JS代码生成插件
• ts-protoc-gen：生成适配gRPC的TypeScript类型与代码
• google-protobuf：处理protobuf消息的基础库
• @grpc/grpc-js：gRPC的JS运行时

2. 编写完整的生成脚本 #

替换或补充原脚本为以下内容，该脚本会同时生成protobuf消息代码、gRPC服务JS代码及对应的TypeScript类型：

#!/bin/bash

IN_DIR="./protos"
OUT_DIR="./dist"

# 生成gRPC服务代码与TypeScript类型
protoc \
    # 指定TypeScript生成插件路径
    --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
    # 生成CommonJS风格的protobuf消息JS代码
    --js_out=import_style=commonjs,binary:${OUT_DIR} \
    # 生成gRPC服务JS代码，指定gRPC插件路径
    --grpc_out=${OUT_DIR} \
    --plugin=protoc-gen-grpc=./node_modules/.bin/grpc_tools_node_protoc_plugin \
    # 生成适配@grpc/grpc-js的TypeScript代码
    --ts_out=grpc_js:${OUT_DIR} \
    # 指定proto文件的根目录（处理import路径）
    -I ${IN_DIR} \
    # 匹配所有proto文件
    ${IN_DIR}/*.proto

3. 生成代码后的使用示例 #

脚本执行完成后，你会在${OUT_DIR}下得到包含服务客户端类的文件。以proto中定义GreeterService为例，在React项目中调用gRPC服务的示例代码如下：

import { GreeterClient } from './dist/greeter_grpc_pb';
import { HelloRequest } from './dist/greeter_pb';
import { credentials } from '@grpc/grpc-js';

// 初始化gRPC客户端
const grpcClient = new GreeterClient('your-grpc-server-address:port', credentials.createInsecure());

// 构造请求消息
const request = new HelloRequest();
request.setName('React Client');

// 调用gRPC服务方法
grpcClient.sayHello(request, (error, response) => {
  if (error) {
    console.error('gRPC请求失败:', error);
    return;
  }
  console.log('gRPC响应:', response.getMessage());
});

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