原生客户端

非官方测试版翻译

本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →

tRPC 的魔力在于无需依赖代码生成即可进行_强类型_ API 调用。在完整的 TypeScript 全栈项目中，您可以直接_将服务器端的类型导入客户端_！这是 tRPC 工作原理的核心要素。

从定义根 tRPC 路由器的文件中将 AppRouter 类型导入客户端。这个单一类型代表了您整个 API 的类型签名。

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

client.ts
ts
import type { AppRouter } from '../path/to/server/trpc';

import type 关键字允许您从文件系统中的_任意 TypeScript 文件_导入类型。更重要的是，import type 只能导入类型而不能导入代码。因此完全不必担心会意外将服务器端代码导入客户端。所有 import type 调用在编译后的 JavaScript 包中_都会被完全移除_（来源）。

初始化 tRPC 客户端

使用 @trpc/client 中的 createTRPCClient 方法创建类型安全客户端：

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

client.ts
ts
// pages/index.tsx
import { createTRPCClient } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
  url: 'http://localhost:5000/trpc',
});

如您所见，我们将 AppRouter 作为类型参数传递给 createTRPCClient。这将返回一个强类型的 client 实例：

client.ts
ts
const bilbo = await client.query('getUser', 'id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
const frodo = await client.mutation('createUser', { name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };

client.ts
ts
const bilbo = await client.query('getUser', 'id_bilbo');
// => { id: 'id_bilbo', name: 'Bilbo' };
const frodo = await client.mutation('createUser', { name: 'Frodo' });
// => { id: 'id_frodo', name: 'Frodo' };