如何在SvelteKit的+page文件中正确使用TypeScript？

一、修复$types导入与类型提示异常 #

1. 确认项目基础配置 #

• 初始化项目时必须选择TypeScript模板，若后期添加TS，要保证svelte.config.js启用TS支持，且tsconfig.json保留SvelteKit生成的默认配置，不要随意修改路径相关配置项。
• 必须启动开发服务（npm run dev/pnpm dev），$types文件是编译时自动生成的，静态状态下编辑器无法识别，启动服务后WebStorm才能读取到类型定义。

2. 正确使用PageLoad类型 #

JSDoc方式（JS文件）

无需手动导入，直接用全局类型注解：

/** @type {import('@sveltejs/kit').PageLoad} */
export function load({ params }) {
  // 此时params会自动匹配动态路由的参数类型，比如路由为[slug]时，params.slug会被识别为string
  return {
    content: params.slug
  };
}

TypeScript文件方式

直接导入自动生成的类型：

import type { PageLoad } from './$types';

export const load: PageLoad = ({ params }) => {
  return {
    content: params.slug
  };
};

注意：动态路由文件夹命名要符合规范，比如src/routes/article/[id]/+page.ts，这样params.id的类型会被自动推导。

3. WebStorm编辑器适配 #

• 升级到2023.3及以上版本，新版本对SvelteKit的类型支持更完善。
• 执行File > Invalidate Caches...清理缓存后重启编辑器，解决类型文件未刷新的问题。
• 若.idea文件夹存在异常，可删除后重新打开项目，让编辑器重新生成配置。

二、可靠的SvelteKit TypeScript基础项目 #

直接用官方最新命令生成骨架项目，这是最不会过时的基础模板：

npm create svelte@latest my-sveltekit-demo

初始化时按以下选项选择：

• 选择Skeleton project（空骨架项目）
• 勾选TypeScript
• 按需勾选ESLint/Prettier

生成的项目自带标准TS配置，动态路由的类型支持完全正常。可以手动添加动态路由测试：

1. 在src/routes下创建user/[uid]/+page.ts
2. 写入测试代码：

import type { PageLoad } from './$types';

export const load: PageLoad = ({ params }) => {
  // params.uid会自动提示为string类型
  return {
    userId: params.uid
  };
};

启动开发服务后，WebStorm就能正常识别参数类型。

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