如何将TypeScript添加到钩子中的SvelteKit句柄函数?

zvokhttg  于 2023-01-06  发布在  TypeScript
关注(0)|答案(3)|浏览(109)

我目前在SvelteKit应用程序的hooks.ts文件中使用以下代码:

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

我试图弄清楚如何在eventresolve参数上使用类型。据我所知,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看起来像是一个有两个参数的函数,它返回一个promise,但是我如何在handle函数声明中写出它呢?

rta7y2nd

rta7y2nd1#

我认为您的问题是(或者应该是😁):“我如何告诉TypeScript我的函数是Handle类型?"。
我认为最简单的方法是在函数之外创建一个变量,这样就可以轻松地输入它。

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

注意你不需要分别输入eventresolve,TS已经知道你的函数的参数和返回类型,它会标记你现有的实现,因为它没有返回MaybePromise<Response>

anauzrmj

anauzrmj2#

作为将函数作为一个整体键入的替代方法(这在键入参数和返回类型时很方便),您可以分别键入这些参数和返回类型并保留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
还有另一个helper类型,如Parameters,它允许您从Handle中一般性地提取返回类型:

type HandleResult = ReturnType<Handle>;
6bc51xsx

6bc51xsx3#

我认为如果你在函数中添加"满足句柄",你会得到"任何"警告。

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;

Reference: https://kit.svelte.dev/docs/hooks#server-hooks
对于上述链接,请确保打开TypeScript以查看正确示例:

相关问题