SvelteKit中@type import('./$types')注释语法的工作原理

那段/** @type {import('./$types').PageServerLoad} */不是普通注释，是JSDoc类型断言，专门给TypeScript做类型校验用的，核心作用是给后续的load函数绑定SvelteKit自动生成的类型规范。

具体拆解： #

• ./$types是SvelteKit自动生成的文件，里面包含当前页面专属的类型定义——比如路由参数、load函数的输入输出类型等，PageServerLoad就是其中一个核心类型，它明确了load函数的参数（比如params、fetch、cookies）结构，以及返回值的类型要求。
• @type是JSDoc的类型标记，告诉TypeScript：接下来的函数/变量必须符合大括号里指定的类型。在SvelteKit里，它通常紧跟在export async function load()前面，这样TS会自动校验你写的load函数：比如有没有误用event里的属性，返回的数据结构是不是符合页面组件的预期，避免拼写错误或者类型不匹配的问题。
• 你也可以用TS的常规导入写法替代：import type { PageServerLoad } from './$types'，然后给load函数加类型注解export async function load(event: PageServerLoad['Input']): Promise<PageServerLoad['Output']> { ... }，效果完全一致——JSDoc写法只是更简洁，不用手动解构输入输出类型。

举个实际使用的例子：

/** @type {import('./$types').PageServerLoad} */
export async function load({ params, fetch }) {
  // TypeScript会自动提示params的属性（比如如果路由是/post/[slug]，params就有slug字段）
  const res = await fetch(`/api/posts/${params.slug}`);
  // 返回的数据会被TS校验，确保符合页面组件期望的类型
  return { post: await res.json() };
}

工作机制： #

TypeScript编译器会主动解析这种JSDoc注释，把它当作正式的类型声明来处理，相当于给load函数套上了类型约束。SvelteKit自动生成的$types文件会根据你的路由、页面配置动态更新，所以这个注释能让你的代码始终和当前页面的类型要求保持同步。

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