tRPC 源代码中的 httpBatchLink 类型解释

在本文中，我们分析了 tRPC 源代码中的 httpBatchLink 类型。但首先，您想知道

什么是 httpBatchLink。

httpBatchLink：

下面是从 tRPC vanilla 设置指南中选取的示例。

import { createTRPCClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '../path/to/server/trpc';
const client = createTRPCClient<AppRouter>({
 links: [
 httpBatchLink({
 url: 'http://localhost:3000/trpc',
 // You can pass any HTTP headers you wish here
 async headers() {
 return {
 authorization: getAuthCookie(),
 };
 },
 }),
 ],
});

httpBatchLink 用于配置 tRPC。我对它的类型很好奇，所以我开始查看它的源代码。在 packages/client/src/links/httpBatchLinks.ts 中有一个名为 httpBatchLink.ts 的文件，在撰写本文时约有 137 行代码。

httpBatchLink函数定义：

export function httpBatchLink<TRouter extends AnyRouter>(
 opts: HTTPBatchLinkOptions<TRouter['_def']['_config']['$types']>,
): TRPCLink<TRouter> {

opts 的类型为 HTTPBatchLinkOptions,。让我们跟随未知的脚步。我会查看以下类型定义：

- HTTPBatchLinkOptions

-TRouter

HTTPBatchLinkOptions 类型

您将在packages/client/src/links/HTTPBatchLinkOptions.ts中找到定义的HTTPBatchLinkOptions类型

export type HTTPBatchLinkOptions<TRoot extends AnyClientTypes> =
 HTTPLinkBaseOptions<TRoot> & {
 maxURLLength?: number;
 /**
 * Headers to be set on outgoing requests or a callback that of said headers
 * @see http://trpc.io/docs/client/headers
 */
 headers?:
 | HTTPHeaders
 | ((opts: {
 opList: NonEmptyArray<Operation>;
 }) => HTTPHeaders | Promise<HTTPHeaders>);
 };

是扩展 AnyClientTypes 的泛型类型，这意味着泛型类型必须至少具有它扩展的类型的属性和结构。

任何客户端类型：

任何客户端类型

export type AnyClientTypes = Pick<AnyRootTypes, 'errorShape' | 'transformer'>;

这里的Pick是什么？我在 TS 文档中搜索 Pick 并找到了这个：

通过从 Type 中选取属性 Keys（字符串文字或字符串文字的并集）集来构造类型。

示例：

interface Todo {
 title: string;
 description: string;
 completed: boolean;
}

type TodoPreview = Pick<Todo, "title" | "completed">;

const todo: TodoPreview = {
 title: "Clean room",
 completed: false,
};

任何根类型：

任何根类型

export type AnyRootTypes = CreateRootTypes<{
 ctx: any;
 meta: any;
 errorShape: any;
 transformer: any;
}>;

这可能会令人困惑，但这里的重要规则是类型是在文件中定义的，使它们与使用这些类型的函数位于同一位置，但也导出这些类型，以便在需要时可以在代码库中使用它们。

这里最好的例子是，httpUtils.ts 中定义的 HTTPLinkBaseOptions 在同一个文件中使用，并且也在 packages/client/src/links/HTTPBatchLinkOptions.ts 中使用

在某些情况下，例如：

• packages/client/src/links/HTTPBatchLinkOptions.ts

• packages/server/src/unstable-core-do-not-import/clientish/inferrable.ts

这些文件中仅定义了类型，这里没有找到其他函数。

关于我们：

在Thinkthroo，我们研究大型开源项目并提供架构指南。我们开发了使用 tailwind 构建的 resubale 组件，您可以在您的项目中使用它们。我们提供 Next.js、React 和 Node 开发服务。

与我们预约会面讨论您的项目。

参考资料：

1. https://trpc.io/docs/client/vanilla/setup

2. https://github.com/trpc/trpc/blob/next/packages/client/src/links/httpBatchLink.ts#L22

3. https://github.com/trpc/trpc/blob/next/packages/client/src/links/HTTPBatchLinkOptions.ts#L6

4. https://github.com/trpc/trpc/blob/next/packages/client/src/links/internals/httpUtils.ts#L22

以上是tRPC 源代码中的 httpBatchLink 类型解释的详细内容。更多信息请关注PHP中文网其他相关文章！