如何将 TypeScript 添加到 Hooks 中的 SvelteKit 句柄函数？答案

【问题标题】：How Do I Add TypeScript to a SvelteKit Handle Function in Hooks?如何将 TypeScript 添加到 Hooks 中的 SvelteKit 句柄函数？
【发布时间】：2023-01-03 04:01:22
【问题描述】：

我目前在 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 参数。 docs here 显示：

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

根据我有限的 TypeScript 知识，看起来 resolve 是一个带有两个返回承诺的参数的函数。但是如何在handle 函数声明中写出来呢？

【问题讨论】：

您键入参数的尝试不会起作用，因为该函数只有一个具有多个属性的参数。如果参数包含大括号，则意味着它会立即被解构。

标签： typescript svelte sveltekit

【解决方案1】：

我认为你的问题是（或者应该是?）：“我如何告诉 TypeScript 我的函数是 Handle 类型的？”。

我认为最简单的方法是在函数之外创建一个变量，这样您就可以轻松地键入它。

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

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

【讨论】：

【解决方案2】：

作为输入函数作为一个整体的替代方法，它很方便，因为它输入参数和返回类型，您可以单独输入它们并保留 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> 来允许同步和异步返回。如果函数实际上是async，则只能使用Promise。

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

type HandleResult = ReturnType<Handle>;

【讨论】：

我考虑过这样的建议，但无论如何你都必须复制返回类型

【解决方案3】：

我认为如果您将“满足句柄”添加到您的函数中，您将得到“任何”警告消失。

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 以查看正确的示例：

【讨论】：