SvelteKit中TypeScript下load函数两种写法报错原因咨询

问题原因 #

你混淆了PageServerLoad的类型定位：它是函数类型，代表符合SvelteKit规范的load函数本身的类型，而非函数的返回值类型。

• 箭头函数写法正确：export const load: PageServerLoad = () => {...} 是给变量load标注类型为PageServerLoad，箭头函数的结构与该函数类型完全匹配，TypeScript能正确验证返回值是否符合要求。
• 普通函数写法错误：export function load(): PageServerLoad {...} 中，: PageServerLoad被当成了函数返回值的类型，但你返回的是包含summaries的对象，和PageServerLoad这个函数类型不匹配，因此触发类型错误。

正确的普通函数写法 #

有两种可行的修正方式：

方式1：给变量标注函数类型（函数表达式赋值）

import type { PageServerLoad } from './$types'
import { posts } from './data'

export const load: PageServerLoad = function() {
    return {
        summaries: posts.map(post => ({
            slug: post.slug,
            title: post.title,
        }))
    }
}

方式2：标注返回值为PageServerLoad的返回类型

利用ReturnType工具类型获取PageServerLoad函数的返回值类型：

import type { PageServerLoad } from './$types'
import { posts } from './data'

export function load(): ReturnType<PageServerLoad> {
    return {
        summaries: posts.map(post => ({
            slug: post.slug,
            title: post.title,
        }))
    }
}

补充说明 #

如果你的函数返回结构完全符合PageServerLoad的要求，也可以省略返回值类型标注，让TypeScript自动推断，但显式标注类型能更早发现潜在错误，提升代码可靠性。

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