# TypeScript {/* #typescript */}

首先阅读 [gRPC 指南](/docs/zh/api/grpc)，创建平台 API 令牌并下载 `platform.proto`。在包含此文件的目录中运行以下命令。

浏览器无法建立原生 gRPC HTTP/2 连接。平台 API 也在 HTTP/1.1 端点上接受 [gRPC-Web](https://github.com/grpc/grpc-web)。安装 `protoc`、`protoc-gen-js` 和 `protoc-gen-grpc-web` 插件以及运行时包：

```bash
npm install grpc-web google-protobuf
npm install --save-dev @types/google-protobuf
mkdir -p src/generated
protoc -I. platform.proto \
  --js_out=import_style=commonjs,binary:src/generated \
  --grpc-web_out=import_style=typescript,mode=grpcweb:src/generated
```

从 [gRPC-Web 官方发布页面和设置指南](https://github.com/grpc/grpc-web#code-generator-plugins)下载编译器插件，并确保其位于 `PATH` 中。命令会生成 `platform_pb.js`、其 TypeScript 声明以及 `PlatformServiceClientPb.ts`。

```typescript
import {PlatformServicePromiseClient} from './generated/PlatformServiceClientPb';
import {GetCatalogRequest, ListCatalogsRequest} from './generated/platform_pb';

// Supply a token at runtime. Do not bundle a long-lived API token in browser code.
export async function listCatalogDetails(token: string) {
  const client = new PlatformServicePromiseClient('https://reconstruct.dev');
  const metadata = {authorization: `Bearer ${token}`};
  const listRequest = new ListCatalogsRequest();
  listRequest.setPageSize(10);

  const page = await client.listCatalogs(listRequest, metadata);
  for (const catalog of page.getCatalogsList()) {
    const detailRequest = new GetCatalogRequest();
    detailRequest.setCatalogId(catalog.getCatalogId());
    const detail = await client.getCatalog(detailRequest, metadata);
    console.log(detail.getCatalogId(), detail.getDescription());
  }
}
```

对于浏览器应用，公共 API 必须通过 CORS 允许该应用的来源。持久 API 令牌应保存在受信任的服务器上；浏览器包无法保护嵌入的密钥。