如何在 Hooks 中将 TypeScript 添加到 SvelteKit 句柄 Function？

Question

我目前在 SvelteKit 应用程序的hooks.ts文件中使用以下内容：

export async function handle({ event, resolve }) {
  console.log(event.locals) //<-- Works fine
}

我试图弄清楚如何在event上使用类型并resolve参数。 据我所知， event是这样的：

import type { RequestEvent } from '@sveltejs/kit'

export async function handle(event: RequestEvent, resolve: ???){
  ...
}

但我不知道如何输入resolve参数。 这里的文档显示了这一点：

interface Handle {
  (input: {
    event: RequestEvent;
    resolve(
      event: RequestEvent,
      opts?: ResolveOptions
    ): MaybePromise<Response>;
  }): MaybePromise<Response>;
}

从我有限的 TypeScript 知识来看， resolve似乎是一个带有两个参数的 function，返回一个 promise。但是我如何在handle function 声明中写出来呢？

Answer 1

我认为您的问题是（或应该是😁）：“我如何告诉 TypeScript 我的 function 属于Handle类型？”。

我认为最简单的方法是从 function 创建一个变量，这样您就可以轻松地输入它。

export const handle: Handle = async function ({ event, resolve }) {
  console.log(event.locals);
}

请注意，您不需要单独键入event或resolve ，TS 已经知道您的函数的参数和返回类型。 它将标记您现有的实现，因为它没有返回MaybePromise<Response>

Answer 2

作为整体键入 function 的替代方法，因为它键入 arguments 和返回类型很方便，您可以单独键入它们并保留export async function语法。

但是，参数类型没有名称，因此您需要从Handle中手动提取它。 请注意，实际上只有一个参数正在被解构。 例如

// Maybe export this from elsewhere to not repeat it
type HandleParams = Parameters<Handle>[0];

export async function handle({ event, resolve }: HandleParams) : Promise<Response> {
    // ...
}

原始返回类型使用MaybePromise<T>来允许同步和异步返回。 如果 function 实际上是async ，则只能使用Promise 。

还有另一种帮助器类型，例如Parameters ，它允许您从Handle中提取返回类型：

type HandleResult = ReturnType<Handle>;

Answer 3

我认为如果您将“满足句柄”添加到您的 function，您将收到 go 的“任何”警告。

import type { Handle } from '@sveltejs/kit';

export const handle = (async ({ event, resolve }) => {
  if (event.url.pathname.startsWith('/custom')) {
    return new Response('custom response');
  }

  const response = await resolve(event);
  return response;
}) satisfies Handle;

参考： https://kit.svelte.dev/docs/hooks#server-hooks

对于上面的链接，请务必打开 TypeScript 以查看正确的示例：

Answer 4

另一件值得一提的事情（因为它还没有记录在 Typescript SvelteKit 文档中），如果您使用序列助手 function来运行多个句柄挂钩，您将键入每个 function 并按以下顺序作为 arguments 传递: