如何为SvelteKit Hooks中的Handle函数添加TypeScript类型？

首先纠正一个写法错误：SvelteKit的handle钩子只接收单个对象入参，event和resolve是从这个入参对象里解构出的属性，不是两个独立的位置参数，你之前写的handle(event: RequestEvent, resolve: ???)的参数结构本身就不符合接口定义。

推荐写法（零出错） #

直接使用官方导出的Handle类型标注整个函数，TypeScript会自动推导解构出的event、resolve的所有类型，不需要手动逐个声明参数类型，也不会出现类型写错、版本迭代后类型不匹配的问题：

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

export const handle: Handle = async ({ event, resolve }) => {
  console.log(event.locals); // event、resolve自动获得正确类型
  // 注意：必须返回resolve执行结果，否则请求会挂起无法响应
  return resolve(event);
};

手动声明类型写法 #

如果你确实需要手动编写参数类型，先从@sveltejs/kit导入ResolveOptions类型即可。官方类型中的MaybePromise<Response>本质是Response | Promise<Response>的别名，不需要额外找导入入口，直接写联合类型即可，完整代码如下：

import type { RequestEvent, ResolveOptions } from '@sveltejs/kit';

export async function handle({
  event,
  resolve
}: {
  event: RequestEvent;
  resolve: (event: RequestEvent, opts?: ResolveOptions) => Response | Promise<Response>;
}) {
  console.log(event.locals);
  return resolve(event);
}

内容的提问来源于stack exchange，提问作者Clifton Labrum