SvelteKit中load函数的fetch、params等类型定义在哪里？

核心类型来源 #

你代码里的/** @type {import('./$types').PageLoad} */已经找对了入口——PageLoad类型就包含了fetch、params等所有load函数参数的定义。

自动生成的$types模块 #

SvelteKit在开发时会自动生成对应路由目录下的$types文件（比如你当前页面的./$types.ts），这个文件是根据你的路由结构自动维护的，不需要手动编写。里面的PageLoad接口明确定义了load函数接收的参数类型。

查看具体类型的方法 #

• 在VS Code这类TS兼容编辑器中，按住Ctrl（Windows/Linux）或Cmd（Mac）点击代码里的PageLoad，就能直接跳转到自动生成的$types文件，查看fetch、params等参数的详细类型定义。
• 如果你想直接看全局的基础类型，也可以从sveltekit包导入LoadEvent类型，它是PageLoad参数的基础类型，包含所有可用参数：

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

优化你的代码示例 #

你当前代码里的item缺少类型声明，可以补充API返回数据的类型定义，让代码更严谨：

// 定义Todo类型匹配API返回结构
interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

/** @type {import('./$types').PageLoad} */
export async function load({ fetch }) {
  // 实现随机数生成（替代你未定义的randomIntFromInterval）
  const rndInt = Math.floor(Math.random() * 20) + 1;
  const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${rndInt}`);
  const item: Todo = await res.json();

  return { item };
}

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