SvelteKit event.locals类型未定义，如何解决Load函数类型错误？

问题描述 #

在hooks.server.ts的handle函数中用try/catch验证JWT：验证通过时给event.locals赋值并继续处理请求，验证失败则重定向到登录页。但TypeScript持续报错，提示想要访问的event.locals属性不存在于Locals类型上——哪怕是写event.locals.hello = "world"这种基础示例，类型错误依然存在。

解决方法：手动在app.d.ts中定义Locals类型 #

SvelteKit不会自动推导locals的类型，必须手动在项目的app.d.ts文件里扩展App.Locals接口，具体操作：

1. 找到项目根目录的app.d.ts文件（没有的话直接新建）
2. 在文件中添加如下代码，将你需要的locals属性类型写入接口：

declare global {
	namespace App {
		interface Locals {
			// 示例：验证JWT后存储的用户信息
			user?: {
				id: string;
				username: string;
			};
			// 测试用的基础属性也可在此定义
			hello?: string;
		}
	}
}

export {};

3. 保存文件后，TypeScript就能识别event.locals上的自定义属性，不会再报类型错误。

官方文档补充（翻译） #

SvelteKit允许通过app.d.ts自定义应用相关类型，其中App.Locals接口专门用于定义event.locals的类型。这个locals对象会在服务器端的整个请求流程中传递，包括handle钩子、服务器端load函数、API路由等场景，你可以在这些场景中安全访问自定义的属性。

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