SvelteKit：LayoutServerLoad等类型无法从./$types导入的问题

问题原因 #

./$types是SvelteKit自动生成的路由特定类型文件，仅包含当前路由下load函数的返回值类型（如LayoutServerData），而LayoutServerLoad、PageLoad、PageServerLoad这类基础的load函数类型属于SvelteKit核心类型，并不在自动生成的./$types中。

解决方案 #

1. 从@sveltejs/kit导入基础类型 #

直接从SvelteKit核心包导入所需的基础load类型：

import type { LayoutServerLoad, PageLoad, PageServerLoad } from '@sveltejs/kit';

2. 结合路由特定类型使用（可选） #

如果需要当前路由的参数、返回值的精确类型提示，可以将基础类型与./$types中的类型结合：

import type { LayoutServerLoad } from '@sveltejs/kit';
import type { LayoutServerData } from './$types';

// 用LayoutServerData约束load函数的返回值类型
export const load: LayoutServerLoad<LayoutServerData> = async ({ params }) => {
  return {
    // 这里会自动匹配LayoutServerData的类型
  };
};

3. 确保类型生成正常工作 #

如果仍然遇到类型问题，检查以下几点：

• 确认已安装@sveltejs/kit和typescript依赖
• 检查tsconfig.json的include字段是否包含$types文件（默认配置为["src/**/*", ".svelte-kit/**/*"]，已覆盖）
• 重启开发服务器或TypeScript语言服务，触发自动类型文件更新

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