参考

类型

公共类型永久链接

可以从 @sveltejs/kit 导入以下类型

Action永久链接

+page.server.js 中 export const actions = {..} 的一部分，即表单操作方法的形状。有关更多信息，请参阅表单操作。

ts
type Action<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = (
	event: RequestEvent<Params, RouteId>
) => MaybePromise<OutputData>;

ActionFailure永久链接

ts
interface ActionFailure<
	T extends Record<string, unknown> | undefined = undefined
> {…}

ts
status: number;

ts
data: T;

ts
[uniqueSymbol]: true;

ActionResult永久链接

通过获取调用表单操作时，响应将采用以下形状之一。

<form method="post" use:enhance={() => {
  return ({ result }) => {
		// result is of type ActionResult
  };
}}

ts
type ActionResult<
	Success extends
		| Record<string, unknown>
		| undefined = Record<string, any>,
	Failure extends
		| Record<string, unknown>
		| undefined = Record<string, any>
> =
	| { type: 'success'; status: number; data?: Success }
	| { type: 'failure'; status: number; data?: Failure }
	| { type: 'redirect'; status: number; location: string }
	| { type: 'error'; status?: number; error: any };

Actions永久链接

+page.server.js 中 export const actions = {..} 对象的形状。有关更多信息，请参阅表单操作。

ts
type Actions<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = Record<string, Action<Params, OutputData, RouteId>>;

Adapter永久链接

适配器负责采用生产版本并将其转化为可以部署到您选择的平台上的内容。

ts
interface Adapter {…}

ts
name: string;

适配器的名称，用于记录。通常对应于包名称。

ts
adapt(builder: Builder): MaybePromise<void>;

builder SvelteKit 提供的一个对象，其中包含用于调整应用程序的方法

此函数在 SvelteKit 构建您的应用程序后调用。

ts
supports?: {…}

在开发和构建期间调用的检查，以确定特定功能是否可以在使用此适配器的生产环境中运行

ts
read?: (details: { config: any; route: { id: string } }) => boolean;

config 合并的路由配置

对 $app/server 中 read 的测试支持

ts
emulate?(): MaybePromise<Emulator>;

创建 Emulator，它允许适配器在开发、构建和预渲染期间影响环境

AfterNavigate永久链接

传递给 afterNavigate 回调的参数。

ts
interface AfterNavigate extends Omit<Navigation, 'type'> {…}

ts
type: Exclude<NavigationType, 'leave'>;

导航类型

enter：应用程序已水化
form：用户提交了一个 <form>
link：导航由链接点击触发
goto：导航由 goto(...) 调用或重定向触发
popstate：导航由后退/前进导航触发

ts
willUnload: false;

由于 afterNavigate 回调在导航完成后才调用，因此它们永远不会在卸载页面的导航中被调用。

AwaitedActionspermalink

ts
type AwaitedActions<
	T extends Record<string, (...args: any) => any>
> = OptionalUnion<
	{
		[Key in keyof T]: UnpackValidationError<
			Awaited<ReturnType<T[Key]>>
		>;
	}[keyof T]
>;

BeforeNavigatepermalink

传递给 beforeNavigate 回调的参数。

ts
interface BeforeNavigate extends Navigation {…}

ts
cancel(): void;

调用此方法可防止导航启动。

Builderpermalink

此对象传递给适配器的 adapt 函数。它包含各种对适配应用程序有用的方法和属性。

ts
interface Builder {…}

ts
log: Logger;

将消息打印到控制台。除非 Vite 的 logLevel 为 info，否则 log.info 和 log.minor 将保持静默。

ts
rimraf(dir: string): void;

删除 dir 及其所有内容。

ts
mkdirp(dir: string): void;

创建 dir 和所有必需的父目录。

ts
config: ValidatedConfig;

完全解析的 svelte.config.js。

ts
prerendered: Prerendered;

有关预渲染页面和资产（如果有）的信息。

ts
routes: RouteDefinition[];

所有路由（包括预渲染）的数组

ts
createEntries(fn: (route: RouteDefinition) => AdapterEntry): Promise<void>;

fn 将一组路由分组到一个入口点中的函数
已弃用改用 builder.routes

创建映射到应用程序的一个或多个路由的单独函数。

ts
findServerAssets(routes: RouteDefinition[]): string[];

查找属于 routes 的服务器文件导入的所有资产

ts
generateFallback(dest: string): Promise<void>;

为静态 Web 服务器生成一个备用页面，在没有匹配的路由时使用。对单页应用程序很有用。

ts
generateEnvModule(): void;

生成一个模块，将构建时环境变量公开为 $env/dynamic/public。

ts
generateManifest(opts: { relativePath: string; routes?: RouteDefinition[] }): string;

opts 应用程序基本目录的相对路径，还可以选择生成清单的格式（esm 或 cjs）

生成服务器端清单以初始化 SvelteKit 服务器。

ts
getBuildDirectory(name: string): string;

解析 outDir 中 name 目录的路径，例如 /path/to/.svelte-kit/my-adapter。

ts
getClientDirectory(): string;

获取包含客户端资产的目录的完全解析路径，包括 static 目录的内容。

ts
getServerDirectory(): string;

获取包含服务器端代码的目录的完全解析路径。

ts
getAppPath(): string;

获取应用程序路径，包括任何配置的 base 路径，例如 my-base-path/_app。

ts
writeClient(dest: string): string[];

dest 目标文件夹
返回写入 dest 的文件数组

将客户端资产写入 dest。

ts
writePrerendered(dest: string): string[];

dest 目标文件夹
返回写入 dest 的文件数组

将预渲染文件写入 dest。

ts
writeServer(dest: string): string[];

dest 目标文件夹
返回写入 dest 的文件数组

将服务器端代码写入dest。

ts
copy(
	from: string,
	to: string,
	opts?: {
		filter?(basename: string): boolean;
		replace?: Record<string, string>;
	}
): string[];

从源文件或目录from
到目标文件或目录to
opts.filter一个函数，用于确定是否应复制文件或目录
opts.replace一个要替换的字符串映射
returns一个已复制文件的数组

复制文件或目录。

ts
compress(directory: string): Promise<void>;

directory包含要压缩的文件的目录

在directory中使用 gzip 和 brotli（如果适用）压缩文件。在原始文件旁边生成.gz和.br文件。

配置永久链接

ts
interface Config {…}

有关详细信息，请参阅配置参考。

Cookie永久链接

ts
interface Cookies {…}

ts
get(name: string, opts?: import('cookie').CookieParseOptions): string | undefined;

nameCookie 的名称
opts选项，直接传递给cookie.parse。请参阅此处的文档

获取之前使用cookies.set或从请求头中设置的 Cookie。

ts
getAll(opts?: import('cookie').CookieParseOptions): Array<{ name: string; value: string }>;

opts选项，直接传递给cookie.parse。请参阅此处的文档

获取之前使用cookies.set或从请求头中设置的所有 Cookie。

ts
set(
	name: string,
	value: string,
	opts: import('cookie').CookieSerializeOptions & { path: string }
): void;

nameCookie 的名称
valueCookie 值
opts选项，直接传递给cookie.serialize。请参阅此处的文档

设置 Cookie。这会向响应中添加一个set-cookie头，但也会在当前请求期间通过cookies.get或cookies.getAll获取 Cookie。

默认情况下，httpOnly和secure选项为true（除了在https://上，其中secure为false），并且如果您希望 Cookie 可被客户端 JavaScript 读取和/或通过 HTTP 传输，则必须显式禁用这些选项。sameSite选项默认为lax。

您必须为 Cookie 指定path。在大多数情况下，您应该显式设置path: '/'以使 Cookie 在整个应用程序中可用。您可以使用相对路径，或设置path: ''以使 Cookie 仅在当前路径及其子路径上可用

ts
delete(name: string, opts: import('cookie').CookieSerializeOptions & { path: string }): void;

nameCookie 的名称
opts选项，直接传递给cookie.serialize。path必须与要删除的 Cookie 的路径匹配。请参阅此处的文档

通过将 Cookie 的值设置为一个空字符串并在过去设置到期日期来删除 Cookie。

ts
serialize(
	name: string,
	value: string,
	opts: import('cookie').CookieSerializeOptions & { path: string }
): string;

nameCookie 的名称
valueCookie 值
opts选项，直接传递给cookie.serialize。请参阅此处的文档

将 Cookie 名称-值对序列化为 Set-Cookie 标头字符串，但不要将其应用于响应。

模拟器永久链接

在开发、构建和预渲染期间影响环境的一组函数

ts
interface Emulator {…}

ts
platform?(details: { config: any; prerender: PrerenderOption }): MaybePromise<App.Platform>;

使用当前路由 config 和 prerender 选项调用的函数，并返回一个 App.Platform 对象

处理永久链接

handle 钩子在 SvelteKit 服务器每次收到请求时运行，并确定响应。它接收一个表示请求的 event 对象和一个名为 resolve 的函数，该函数渲染路由并生成 Response。这允许你修改响应标头或正文，或完全绕过 SvelteKit（例如，以编程方式实现路由）。

ts
type Handle = (input: {
	event: RequestEvent;
	resolve(
		event: RequestEvent,
		opts?: ResolveOptions
	): MaybePromise<Response>;
}) => MaybePromise<Response>;

HandleClientError永久链接

当导航时抛出意外错误时，客户端 handleError 钩子运行。

如果在加载或后续渲染期间抛出意外错误，此函数将使用错误和事件调用。确保此函数绝不抛出错误。

ts
type HandleClientError = (input: {
	error: unknown;
	event: NavigationEvent;
	status: number;
	message: string;
}) => MaybePromise<void | App.Error>;

HandleFetch永久链接

handleFetch 钩子允许你修改（或替换）在服务器上（或预渲染期间）运行的 load 函数中发生的 fetch 请求

ts
type HandleFetch = (input: {
	event: RequestEvent;
	request: Request;
	fetch: typeof fetch;
}) => MaybePromise<Response>;

HandleServerError永久链接

当响应请求时抛出意外错误时，服务器端 handleError 钩子运行。

如果在加载或渲染期间抛出意外错误，此函数将使用错误和事件调用。确保此函数绝不抛出错误。

ts
type HandleServerError = (input: {
	error: unknown;
	event: RequestEvent;
	status: number;
	message: string;
}) => MaybePromise<void | App.Error>;

HttpError永久链接

error 函数返回的对象。

ts
interface HttpError {…}

ts
status: number;

HTTP 状态代码，范围为 400-599。

ts
body: App.Error;

错误的内容。

KitConfig永久链接

ts
interface KitConfig {…}

有关详细信息，请参阅配置参考。

LessThan永久链接

ts
type LessThan<
	TNumber extends number,
	TArray extends any[] = []
> = TNumber extends TArray['length']
	? TArray[number]
	: LessThan<TNumber, [...TArray, TArray['length']]>;

Load永久链接

PageLoad 和 LayoutLoad 的泛型形式。你应该从 ./$types 中导入它们（参见生成的类型），而不是直接使用 Load。

ts
type Load<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	InputData extends Record<string, unknown> | null = Record<
		string,
		any
	> | null,
	ParentData extends Record<string, unknown> = Record<
		string,
		any
	>,
	OutputData extends Record<
		string,
		unknown
	> | void = Record<string, any> | void,
	RouteId extends string | null = string | null
> = (
	event: LoadEvent<Params, InputData, ParentData, RouteId>
) => MaybePromise<OutputData>;

LoadEvent永久链接

PageLoadEvent 和 LayoutLoadEvent 的泛型形式。你应该从 ./$types 中导入它们（参见生成的类型），而不是直接使用 LoadEvent。

ts
interface LoadEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	Data extends Record<string, unknown> | null = Record<
		string,
		any
	> | null,
	ParentData extends Record<string, unknown> = Record<
		string,
		any
	>,
	RouteId extends string | null = string | null
> extends NavigationEvent<Params, RouteId> {…}

ts
fetch: typeof fetch;

fetch 等同于原生 fetch Web API，并带有一些附加功能

它可用于在服务器上进行凭据请求，因为它继承了页面请求的 cookie 和 authorization 标头。
它可以在服务器上进行相对请求（通常，fetch 在服务器上下文中使用时需要带来源的 URL）。
内部请求（例如，针对 +server.js 路由的请求）在服务器上运行时会直接转到处理程序函数，而不会产生 HTTP 调用的开销。
在服务器端渲染期间，响应将被捕获并通过连接到 Response 对象的 text 和 json 方法内联到渲染的 HTML 中。请注意，标头不会被序列化，除非通过 filterSerializedResponseHeaders 显式包含。
在水化期间，响应将从 HTML 中读取，从而保证一致性并防止额外的网络请求。

你可以在此处了解有关使用 Cookie 进行凭据请求的更多信息

ts
data: Data;

包含路由的服务器 load 函数（在 +layout.server.js 或 +page.server.js 中）返回的数据（如果有）。

ts
setHeaders(headers: Record<string, string>): void;

如果你需要为响应设置标头，可以使用此方法。例如，如果你希望页面被缓存，这会很有用

src/routes/blog/+page.js

ts
export async function load({ fetch, setHeaders }) {
Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.7031
7031Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.	const url = `https://cms.example.com/articles.json`;
	const response = await fetch(url);

	setHeaders({
		age: response.headers.get('age'),
		'cache-control': response.headers.get('cache-control')
	});

	return response.json();
}

src/routes/blog/+page.ts

ts
export async function load({ fetch, setHeaders }) {
Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.7031
7031Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.	const url = `https://cms.example.com/articles.json`;
	const response = await fetch(url);

	setHeaders({
		age: response.headers.get('age'),
		'cache-control': response.headers.get('cache-control'),
	});

	return response.json();
}

多次设置相同的标头（即使在单独的 load 函数中）是一个错误——你只能设置给定的标头一次。

你不能使用 setHeaders 添加 set-cookie 标头——相反，在仅限服务器的 load 函数中使用 cookies API。

当 load 函数在浏览器中运行时，setHeaders 不起作用。

ts
parent(): Promise<ParentData>;

await parent() 返回父 +layout.js load 函数中的数据。隐式地，一个缺失的 +layout.js 被视为一个 ({ data }) => data 函数，这意味着它将返回并转发父 +layout.server.js 文件中的数据。

使用 await parent() 时，小心不要引入意外的瀑布。例如，如果你只想将父数据合并到返回的输出中，请在获取其他数据之后调用它。

ts
depends(...deps: Array<`${string}:${string}`>): void;

此函数声明 load 函数对一个或多个 URL 或自定义标识符具有依赖关系，随后可以使用 invalidate() 来导致 load 重新运行。

大多数情况下你不需要这样做，因为 fetch 会代表你调用 depends — 只有在你使用绕过 fetch 的自定义 API 客户端时才需要。

URL 可以是绝对的，也可以相对于正在加载的页面，并且必须编码。

自定义标识符必须以一个或多个小写字母开头，后跟一个冒号，以符合URI 规范。

以下示例展示了如何使用 depends 来注册对自定义标识符的依赖关系，该标识符在按钮单击后被invalidate，从而使 load 函数重新运行。

src/routes/+page.js

ts
let count = 0;
export async function load({ depends }) {
Binding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.	depends('increase:count');

	return { count: count++ };
}

src/routes/+page.ts

ts
let count = 0;
export async function load({ depends }) {
Binding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.	depends('increase:count');

	return { count: count++ };
}

src/routes/+page.svelte

<script>
	import { invalidate } from '$app/navigation';

	export let data;

	const increase = async () => {
		await invalidate('increase:count');
	}
</script>

<p>{data.count}<p>
<button on:click={increase}>Increase Count</button>

ts
untrack<T>(fn: () => T): T;

使用此函数来选择退出对回调中同步调用的一切内容的依赖关系跟踪。示例

src/routes/+page.server.js

ts
export async function load({ untrack, url }) {
Binding element 'untrack' implicitly has an 'any' type.
Binding element 'url' implicitly has an 'any' type.7031
7031Binding element 'untrack' implicitly has an 'any' type.
Binding element 'url' implicitly has an 'any' type.	// Untrack url.pathname so that path changes don't trigger a rerun
	if (untrack(() => url.pathname === '/')) {
		return { message: 'Welcome!' };
	}
}

src/routes/+page.server.ts

ts
export async function load({ untrack, url }) {
Binding element 'untrack' implicitly has an 'any' type.
Binding element 'url' implicitly has an 'any' type.7031
7031Binding element 'untrack' implicitly has an 'any' type.
Binding element 'url' implicitly has an 'any' type.	// Untrack url.pathname so that path changes don't trigger a rerun
	if (untrack(() => url.pathname === '/')) {
		return { message: 'Welcome!' };
	}
}

LoadPropertiespermalink

ts
type LoadProperties<
	input extends Record<string, any> | void
> = input extends void
	? undefined // needs to be undefined, because void will break intellisense
	: input extends Record<string, any>
		? input
		: unknown;

ts
interface Navigation {…}

ts
from: NavigationTarget | null;

导航触发的位置

ts
to: NavigationTarget | null;

导航将去/已去的位置

ts
type: Exclude<NavigationType, 'enter'>;

导航类型

form：用户提交了一个 <form>
leave：应用程序正在离开，可能是因为选项卡正在关闭或正在导航到其他文档
link：导航由链接点击触发
goto：导航由 goto(...) 调用或重定向触发
popstate：导航由后退/前进导航触发

ts
willUnload: boolean;

导航是否会导致页面卸载（即不是客户端导航）

ts
delta?: number;

在历史记录后退/前进导航的情况下，后退/前进的步数

ts
complete: Promise<void>;

一个在导航完成后解决，并在导航失败或中止时拒绝的 Promise。在 willUnload 导航的情况下，Promise 永远不会解决

NavigationEventpermalink

ts
interface NavigationEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> {…}

ts
params: Params;

当前页面的参数 - 例如，对于像 /blog/[slug] 这样的路由，一个 { slug: string } 对象

ts
route: {…}

关于当前路由的信息

ts
id: RouteId;

当前路由的 ID - 例如对于 src/routes/blog/[slug]，它将是 /blog/[slug]

ts
url: URL;

当前页面的 URL

NavigationTarget永久链接

特定导航目标的信息。

ts
interface NavigationTarget {…}

ts
params: Record<string, string> | null;

目标页面的参数 - 例如对于 /blog/[slug] 这样的路由，一个 { slug: string } 对象。如果目标不是 SvelteKit 应用程序的一部分（无法解析为路由），则为 null。

ts
route: { id: string | null };

有关目标路由的信息

ts
url: URL;

导航到的 URL

NavigationType永久链接

enter：应用程序已水化
form：用户提交了一个带有 GET 方法的 <form>
leave：用户通过关闭标签页或使用后退/前进按钮转到其他文档，从而离开应用程序
link：导航由链接点击触发
goto：导航由 goto(...) 调用或重定向触发
popstate：导航由后退/前进导航触发

ts
type NavigationType =
	| 'enter'
	| 'form'
	| 'leave'
	| 'link'
	| 'goto'
	| 'popstate';

NumericRange永久链接

ts
type NumericRange<
	TStart extends number,
	TEnd extends number
> = Exclude<TEnd | LessThan<TEnd>, LessThan<TStart>>;

OnNavigate永久链接

传递给 onNavigate 回调的参数。

ts
interface OnNavigate extends Navigation {…}

ts
type: Exclude<NavigationType, 'enter' | 'leave'>;

导航类型

form：用户提交了一个 <form>
link：导航由链接点击触发
goto：导航由 goto(...) 调用或重定向触发
popstate：导航由后退/前进导航触发

ts
willUnload: false;

由于 onNavigate 回调在客户端导航之前立即调用，因此永远不会使用卸载页面的导航来调用它们。

Page永久链接

$page 存储的形状

ts
interface Page<
	Params extends Record<string, string> = Record<
		string,
		string
	>,
	RouteId extends string | null = string | null
> {…}

ts
url: URL;

当前页面的 URL

ts
params: Params;

当前页面的参数 - 例如，对于像 /blog/[slug] 这样的路由，一个 { slug: string } 对象

ts
route: {…}

关于当前路由的信息

ts
id: RouteId;

当前路由的 ID - 例如对于 src/routes/blog/[slug]，它将是 /blog/[slug]

ts
status: number;

当前页面的 Http 状态代码

ts
error: App.Error | null;

当前页面的错误对象（如果有）。从 handleError 钩子中填充。

ts
data: App.PageData & Record<string, any>;

当前页面上所有 load 函数的所有数据的合并结果。你可以通过 App.PageData 输入一个公分母。

ts
state: App.PageState;

页面状态，可以使用 $app/navigation 中的 pushState 和 replaceState 函数进行操作。

ts
form: any;

仅在提交表单后填充。有关更多信息，请参阅表单操作。

ParamMatcher永久链接

参数匹配器的形状。有关更多信息，请参阅匹配。

ts
type ParamMatcher = (param: string) => boolean;

PrerenderOption永久链接

ts
type PrerenderOption = boolean | 'auto';

Redirect永久链接

由 redirect 函数返回的对象

ts
interface Redirect {…}

ts
status: 300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 | 308;

HTTP 状态代码，范围为 300-308。

ts
location: string;

重定向到的位置。

RequestEvent永久链接

ts
interface RequestEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> {…}

ts
cookies: Cookies;

获取或设置与当前请求相关的 cookie

ts
fetch: typeof fetch;

fetch 等同于原生 fetch Web API，并带有一些附加功能

它可用于在服务器上进行凭据请求，因为它继承了页面请求的 cookie 和 authorization 标头。
它可以在服务器上进行相对请求（通常，fetch 在服务器上下文中使用时需要带来源的 URL）。
内部请求（例如，针对 +server.js 路由的请求）在服务器上运行时会直接转到处理程序函数，而不会产生 HTTP 调用的开销。
在服务器端渲染期间，响应将被捕获并通过连接到 Response 对象的 text 和 json 方法内联到渲染的 HTML 中。请注意，标头不会被序列化，除非通过 filterSerializedResponseHeaders 显式包含。
在水化期间，响应将从 HTML 中读取，从而保证一致性并防止额外的网络请求。

你可以在此处了解有关使用 Cookie 进行凭据请求的更多信息

ts
getClientAddress(): string;

客户端的 IP 地址，由适配器设置。

ts
locals: App.Locals;

包含在 handle 钩子 中添加到请求中的自定义数据。

ts
params: Params;

当前路由的参数 - 例如，对于像 /blog/[slug] 这样的路由，一个 { slug: string } 对象

ts
platform: Readonly<App.Platform> | undefined;

通过适配器提供的附加数据。

ts
request: Request;

原始请求对象

ts
route: {…}

关于当前路由的信息

ts
id: RouteId;

当前路由的 ID - 例如对于 src/routes/blog/[slug]，它将是 /blog/[slug]

ts
setHeaders(headers: Record<string, string>): void;

如果你需要为响应设置标头，可以使用此方法。例如，如果你希望页面被缓存，这会很有用

src/routes/blog/+page.js

ts
export async function load({ fetch, setHeaders }) {
Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.7031
7031Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.	const url = `https://cms.example.com/articles.json`;
	const response = await fetch(url);

	setHeaders({
		age: response.headers.get('age'),
		'cache-control': response.headers.get('cache-control')
	});

	return response.json();
}

src/routes/blog/+page.ts

ts
export async function load({ fetch, setHeaders }) {
Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.7031
7031Binding element 'fetch' implicitly has an 'any' type.
Binding element 'setHeaders' implicitly has an 'any' type.	const url = `https://cms.example.com/articles.json`;
	const response = await fetch(url);

	setHeaders({
		age: response.headers.get('age'),
		'cache-control': response.headers.get('cache-control'),
	});

	return response.json();
}

多次设置相同的标头（即使在单独的 load 函数中）是一个错误——你只能设置给定的标头一次。

您不能使用 setHeaders 添加 set-cookie 标头 - 请改用 cookies API。

ts
url: URL;

请求的 URL。

ts
isDataRequest: boolean;

如果请求来自客户端请求 +page/layout.server.js 数据，则为 true。在这种情况下，url 属性将被剥离与数据请求相关的内部信息。如果此区别对您很重要，请改用此属性。

ts
isSubRequest: boolean;

对于来自 SvelteKit 的 +server.js 调用，true，而无需实际进行 HTTP 请求的开销。当您在服务器上进行同源 fetch 请求时，就会发生这种情况。

RequestHandler永久链接

从 +server.js 文件导出的 (event: RequestEvent) => Response 函数，它对应于一个 HTTP 动词（GET、PUT、PATCH 等），并处理使用该方法的请求。

它接收 Params 作为第一个泛型参数，您可以使用生成的类型来跳过它。

ts
type RequestHandler<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	RouteId extends string | null = string | null
> = (
	event: RequestEvent<Params, RouteId>
) => MaybePromise<Response>;

Reroute永久链接

reroute 钩子允许您在使用 URL 确定要渲染哪个路由之前修改 URL。

ts
type Reroute = (event: { url: URL }) => void | string;

ResolveOptions永久链接

ts
interface ResolveOptions {…}

ts
transformPageChunk?(input: { html: string; done: boolean }): MaybePromise<string | undefined>;

input html 块和此是否是最后一个块的信息

对 HTML 应用自定义转换。如果 done 为 true，则它是最后一个块。不能保证块是格式良好的 HTML（例如，它们可能包含元素的开始标签，但不包含其结束标签），但它们总是会在 %sveltekit.head% 或布局/页面组件等明智的边界处分割。

ts
filterSerializedResponseHeaders?(name: string, value: string): boolean;

name 头部名称
value 头部值

确定在使用 fetch 的 load 函数加载资源时，哪些头部应包含在序列化的响应中。默认情况下，不包含任何头部。

ts
preload?(input: { type: 'font' | 'css' | 'js' | 'asset'; path: string }): boolean;

input 文件类型及其路径

确定应添加到 <head> 标记中以预加载的内容。默认情况下，将预加载 js 和 css 文件。

RouteDefinitionpermalink

ts
interface RouteDefinition<Config = any> {…}

ts
id: string;

ts
api: {
	methods: Array<HttpMethod | '*'>;
};

ts
page: {
	methods: Array<Extract<HttpMethod, 'GET' | 'POST'>>;
};

ts
pattern: RegExp;

ts
prerender: PrerenderOption;

ts
segments: RouteSegment[];

ts
methods: Array<HttpMethod | '*'>;

ts
config: Config;

SSRManifestpermalink

ts
interface SSRManifest {…}

ts
appDir: string;

ts
appPath: string;

ts
assets: Set<string>;

ts
mimeTypes: Record<string, string>;

ts
_: {…}

私有字段

ts
client: NonNullable<BuildData['client']>;

ts
nodes: SSRNodeLoader[];

ts
routes: SSRRoute[];

ts
matchers(): Promise<Record<string, ParamMatcher>>;

ts
server_assets: Record<string, number>;

服务器代码导入的所有资产的 [file]: size 映射

Serverpermalink

ts
class Server {…}

ts
constructor(manifest: SSRManifest);

ts
init(options: ServerInitOptions): Promise<void>;

ts
respond(request: Request, options: RequestOptions): Promise<Response>;

ServerInitOptionspermalink

ts
interface ServerInitOptions {…}

ts
env: Record<string, string>;

环境变量的映射

ts
read?: (file: string) => ReadableStream;

将资产文件名转换为 ReadableStream 的函数。$app/server 中的 read 导出才能正常工作

ServerLoadpermalink

PageServerLoad 和 LayoutServerLoad 的通用形式。你应该从 ./$types（参见生成类型）导入这些类型，而不是直接使用 ServerLoad。

ts
type ServerLoad<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	ParentData extends Record<string, any> = Record<
		string,
		any
	>,
	OutputData extends Record<string, any> | void = Record<
		string,
		any
	> | void,
	RouteId extends string | null = string | null
> = (
	event: ServerLoadEvent<Params, ParentData, RouteId>
) => MaybePromise<OutputData>;

ServerLoadEventpermalink

ts
interface ServerLoadEvent<
	Params extends Partial<Record<string, string>> = Partial<
		Record<string, string>
	>,
	ParentData extends Record<string, any> = Record<
		string,
		any
	>,
	RouteId extends string | null = string | null
> extends RequestEvent<Params, RouteId> {…}

ts
parent(): Promise<ParentData>;

await parent() 从父 +layout.server.js load 函数返回数据。

使用 await parent() 时，小心不要引入意外的瀑布。例如，如果你只想将父数据合并到返回的输出中，请在获取其他数据之后调用它。

ts
depends(...deps: string[]): void;

此函数声明 load 函数对一个或多个 URL 或自定义标识符具有依赖关系，随后可以使用 invalidate() 来导致 load 重新运行。

大多数情况下你不需要这样做，因为 fetch 会代表你调用 depends — 只有在你使用绕过 fetch 的自定义 API 客户端时才需要。

URL 可以是绝对的，也可以相对于正在加载的页面，并且必须编码。

自定义标识符必须以一个或多个小写字母开头，后跟一个冒号，以符合URI 规范。

以下示例展示了如何使用 depends 来注册对自定义标识符的依赖关系，该标识符在按钮单击后被invalidate，从而使 load 函数重新运行。

src/routes/+page.js

ts
let count = 0;
export async function load({ depends }) {
Binding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.	depends('increase:count');

	return { count: count++ };
}

src/routes/+page.ts

ts
let count = 0;
export async function load({ depends }) {
Binding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.	depends('increase:count');

	return { count: count++ };
}

src/routes/+page.svelte

<script>
	import { invalidate } from '$app/navigation';

	export let data;

	const increase = async () => {
		await invalidate('increase:count');
	}
</script>

<p>{data.count}<p>
<button on:click={increase}>Increase Count</button>

ts
untrack<T>(fn: () => T): T;

使用此函数来选择退出对回调中同步调用的一切内容的依赖关系跟踪。示例

src/routes/+page.js

ts
export async function load({ untrack, url }) {
Binding element 'untrack' implicitly has an 'any' type.
Binding element 'url' implicitly has an 'any' type.7031
7031Binding element 'untrack' implicitly has an 'any' type.
Binding element 'url' implicitly has an 'any' type.	// Untrack url.pathname so that path changes don't trigger a rerun
	if (untrack(() => url.pathname === '/')) {
		return { message: 'Welcome!' };
	}
}

src/routes/+page.ts

ts
export async function load({ untrack, url }) {
Binding element 'untrack' implicitly has an 'any' type.
Binding element 'url' implicitly has an 'any' type.7031
7031Binding element 'untrack' implicitly has an 'any' type.
Binding element 'url' implicitly has an 'any' type.	// Untrack url.pathname so that path changes don't trigger a rerun
	if (untrack(() => url.pathname === '/')) {
		return { message: 'Welcome!' };
	}
}

Snapshotpermalink

从页面或布局组件导出的 export const snapshot 的类型。

ts
interface Snapshot<T = any> {…}

ts
capture: () => T;

ts
restore: (snapshot: T) => void;

SubmitFunctionpermalink

ts
type SubmitFunction<
	Success extends
		| Record<string, unknown>
		| undefined = Record<string, any>,
	Failure extends
		| Record<string, unknown>
		| undefined = Record<string, any>
> = (input: {
	action: URL;
	formData: FormData;
	formElement: HTMLFormElement;
	controller: AbortController;
	submitter: HTMLElement | null;
	cancel(): void;
}) => MaybePromise<
	| void
	| ((opts: {
			formData: FormData;
			formElement: HTMLFormElement;
			action: URL;
			result: ActionResult<Success, Failure>;
			/**
			 * Call this to get the default behavior of a form submission response.
			 * @param options Set `reset: false` if you don't want the `<form>` values to be reset after a successful submission.
			 * @param invalidateAll Set `invalidateAll: false` if you don't want the action to call `invalidateAll` after submission.
			 */
			update(options?: {
				reset?: boolean;
				invalidateAll?: boolean;
			}): Promise<void>;
	  }) => void)
>;

私有类型permalink

以下内容由上面记录的公共类型引用，但无法直接导入

AdapterEntrypermalink

ts
interface AdapterEntry {…}

ts
id: string;

唯一标识 HTTP 服务（例如无服务器函数）的字符串，用于去重。例如，/foo/a-[b] 和 /foo/[c] 是不同的路由，但都会在 Netlify _redirects 文件中表示为 /foo/:param，因此它们共享一个 ID

ts
filter(route: RouteDefinition): boolean;

将候选路由与当前路由进行比较以确定是否应将其与当前路由分组的函数。

用例

后备页面：/foo/[c] 是 /foo/a-[b] 的后备，/[...catchall] 是所有路由的后备
对共享公共 config 的路由进行分组：/foo 应部署到边缘，/bar 和 /baz 应部署到无服务器函数

ts
complete(entry: { generateManifest(opts: { relativePath: string }): string }): MaybePromise<void>;

在创建条目后调用的函数。你应该在此处将函数写入文件系统并生成重定向清单。

Csppermalink

ts
namespace Csp {
	type ActionSource = 'strict-dynamic' | 'report-sample';
	type BaseSource =
		| 'self'
		| 'unsafe-eval'
		| 'unsafe-hashes'
		| 'unsafe-inline'
		| 'wasm-unsafe-eval'
		| 'none';
	type CryptoSource =
		`${'nonce' | 'sha256' | 'sha384' | 'sha512'}-${string}`;
	type FrameSource =
		| HostSource
		| SchemeSource
		| 'self'
		| 'none';
	type HostNameScheme = `${string}.${string}` | 'localhost';
	type HostSource =
		`${HostProtocolSchemes}${HostNameScheme}${PortScheme}`;
	type HostProtocolSchemes = `${string}://` | '';
	type HttpDelineator = '/' | '?' | '#' | '\\';
	type PortScheme = `:${number}` | '' | ':*';
	type SchemeSource =
		| 'http:'
		| 'https:'
		| 'data:'
		| 'mediastream:'
		| 'blob:'
		| 'filesystem:';
	type Source =
		| HostSource
		| SchemeSource
		| CryptoSource
		| BaseSource;
	type Sources = Source[];
}

CspDirectives永久链接

ts
interface CspDirectives {…}

ts
'child-src'?: Csp.Sources;

ts
'default-src'?: Array<Csp.Source | Csp.ActionSource>;

ts
'frame-src'?: Csp.Sources;

ts
'worker-src'?: Csp.Sources;

ts
'connect-src'?: Csp.Sources;

ts
'font-src'?: Csp.Sources;

ts
'img-src'?: Csp.Sources;

ts
'manifest-src'?: Csp.Sources;

ts
'media-src'?: Csp.Sources;

ts
'object-src'?: Csp.Sources;

ts
'prefetch-src'?: Csp.Sources;

ts
'script-src'?: Array<Csp.Source | Csp.ActionSource>;

ts
'script-src-elem'?: Csp.Sources;

ts
'script-src-attr'?: Csp.Sources;

ts
'style-src'?: Array<Csp.Source | Csp.ActionSource>;

ts
'style-src-elem'?: Csp.Sources;

ts
'style-src-attr'?: Csp.Sources;

ts
'base-uri'?: Array<Csp.Source | Csp.ActionSource>;

ts
sandbox?: Array<
| 'allow-downloads-without-user-activation'
| 'allow-forms'
| 'allow-modals'
| 'allow-orientation-lock'
| 'allow-pointer-lock'
| 'allow-popups'
| 'allow-popups-to-escape-sandbox'
| 'allow-presentation'
| 'allow-same-origin'
| 'allow-scripts'
| 'allow-storage-access-by-user-activation'
| 'allow-top-navigation'
| 'allow-top-navigation-by-user-activation'
>;

ts
'form-action'?: Array<Csp.Source | Csp.ActionSource>;

ts
'frame-ancestors'?: Array<Csp.HostSource | Csp.SchemeSource | Csp.FrameSource>;

ts
'navigate-to'?: Array<Csp.Source | Csp.ActionSource>;

ts
'report-uri'?: string[];

ts
'report-to'?: string[];

ts
'require-trusted-types-for'?: Array<'script'>;

ts
'trusted-types'?: Array<'none' | 'allow-duplicates' | '*' | string>;

ts
'upgrade-insecure-requests'?: boolean;

ts
'require-sri-for'?: Array<'script' | 'style' | 'script style'>;

已弃用未定义

ts
'block-all-mixed-content'?: boolean;

已弃用未定义

ts
'plugin-types'?: Array<`${string}/${string}` | 'none'>;

已弃用未定义

ts
referrer?: Array<
| 'no-referrer'
| 'no-referrer-when-downgrade'
| 'origin'
| 'origin-when-cross-origin'
| 'same-origin'
| 'strict-origin'
| 'strict-origin-when-cross-origin'
| 'unsafe-url'
| 'none'
>;

已弃用未定义

HttpMethod永久链接

ts
type HttpMethod =
	| 'GET'
	| 'HEAD'
	| 'POST'
	| 'PUT'
	| 'DELETE'
	| 'PATCH'
	| 'OPTIONS';

Logger永久链接

ts
interface Logger {…}

ts
(msg: string): void;

ts
success(msg: string): void;

ts
error(msg: string): void;

ts
warn(msg: string): void;

ts
minor(msg: string): void;

ts
info(msg: string): void;

MaybePromise永久链接

ts
type MaybePromise<T> = T | Promise<T>;

PrerenderEntryGeneratorMismatchHandler永久链接

ts
interface PrerenderEntryGeneratorMismatchHandler {…}

ts
(details: { generatedFromId: string; entry: string; matchedId: string; message: string }): void;

PrerenderEntryGeneratorMismatchHandlerValue永久链接

ts
type PrerenderEntryGeneratorMismatchHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderEntryGeneratorMismatchHandler;

PrerenderHttpErrorHandler永久链接

ts
interface PrerenderHttpErrorHandler {…}

ts
(details: {
status: number;
path: string;
referrer: string | null;
referenceType: 'linked' | 'fetched';
message: string;
}): void;

PrerenderHttpErrorHandlerValue永久链接

ts
type PrerenderHttpErrorHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderHttpErrorHandler;

PrerenderMap永久链接

ts
type PrerenderMap = Map<string, PrerenderOption>;

PrerenderMissingIdHandler永久链接

ts
interface PrerenderMissingIdHandler {…}

ts
(details: { path: string; id: string; referrers: string[]; message: string }): void;

PrerenderMissingIdHandlerValue永久链接

ts
type PrerenderMissingIdHandlerValue =
	| 'fail'
	| 'warn'
	| 'ignore'
	| PrerenderMissingIdHandler;

PrerenderOption永久链接

ts
type PrerenderOption = boolean | 'auto';

Prerendered永久链接

ts
interface Prerendered {…}

ts
pages: Map<
string,
{
	/** The location of the .html file relative to the output directory */
	file: string;
}
>;

path 到 { file } 对象的映射，其中像 /foo 这样的路径对应于 foo.html，而像 /bar/ 这样的路径对应于 bar/index.html。

ts
assets: Map<
string,
{
	/** The MIME type of the asset */
	type: string;
}
>;

path 到 { type } 对象的映射。

ts
redirects: Map<
string,
{
	status: number;
	location: string;
}
>;

预渲染期间遇到的重定向的映射。

ts
paths: string[];

预渲染路径的数组（没有尾部斜杠，无论 trailingSlash 配置如何）

RequestOptions永久链接

ts
interface RequestOptions {…}

ts
getClientAddress(): string;

ts
platform?: App.Platform;

RouteSegment永久链接

ts
interface RouteSegment {…}

ts
content: string;

ts
dynamic: boolean;

ts
rest: boolean;

TrailingSlash永久链接

ts
type TrailingSlash = 'never' | 'always' | 'ignore';

生成的类型永久链接

RequestHandler 和 Load 类型都接受一个 Params 参数，允许你对 params 对象进行类型化。例如，此端点期望 foo、bar 和 baz 参数

src/routes/[foo]/[bar]/[baz]/+page.server.js

ts
/** @type {import('@sveltejs/kit').RequestHandler<{
	foo: string;
	bar: string;
	baz: string
  }>} */
export async function GET({ params }) {
A function whose declared type is neither 'void' nor 'any' must return a value.2355A function whose declared type is neither 'void' nor 'any' must return a value.	// ...
}

src/routes/[foo]/[bar]/[baz]/+page.server.ts

ts
export const GET: import('@sveltejs/kit').RequestHandler<{
Type '({ params }: RequestEvent<{ foo: string; bar: string; baz: string; }, string | null>) => Promise<void>' is not assignable to type 'RequestHandler<{ foo: string; bar: string; baz: string; }, string | null>'.
  Type 'Promise<void>' is not assignable to type 'MaybePromise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.2322Type '({ params }: RequestEvent<{ foo: string; bar: string; baz: string; }, string | null>) => Promise<void>' is not assignable to type 'RequestHandler<{ foo: string; bar: string; baz: string; }, string | null>'.
  Type 'Promise<void>' is not assignable to type 'MaybePromise<Response>'.
    Type 'Promise<void>' is not assignable to type 'Promise<Response>'.
      Type 'void' is not assignable to type 'Response'.	foo: string;
	bar: string;
	baz: string;
}> = async ({ params }) => {
	// ...
};

不用说，这写起来很麻烦，而且可移植性较差（如果你将 [foo] 目录重命名为 [qux]，则类型将不再反映现实）。

为了解决此问题，SvelteKit 为您的每个端点和页面生成 .d.ts 文件

.svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts

ts
import type * as Kit from '@sveltejs/kit';

type RouteParams = {
	foo: string;
	bar: string;
	baz: string;
}

export type PageServerLoad = Kit.ServerLoad<RouteParams>;
export type PageLoad = Kit.Load<RouteParams>;

由于 TypeScript 配置中的 rootDirs 选项，这些文件可以作为兄弟文件导入到您的端点和页面中

src/routes/[foo]/[bar]/[baz]/+page.server.js

ts
/** @type {import('./$types').PageServerLoad} */
export async function GET({ params }) {
	// ...
}

src/routes/[foo]/[bar]/[baz]/+page.server.ts

ts
import type { PageServerLoad } from './$types';

export const GET: PageServerLoad = async ({ params }) => {
	// ...
};

src/routes/[foo]/[bar]/[baz]/+page.js

ts
/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
	// ...
}

src/routes/[foo]/[bar]/[baz]/+page.ts

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

export const load: PageLoad = async ({ params, fetch }) => {
	// ...
};

为此，您自己的 tsconfig.json 或 jsconfig.json 应从生成的 .svelte-kit/tsconfig.json 扩展（其中 .svelte-kit 是您的 outDir）

{ "extends": "./.svelte-kit/tsconfig.json" }

默认 tsconfig.json永久链接

生成的 .svelte-kit/tsconfig.json 文件包含多种选项。有些是根据您的项目配置以编程方式生成的，通常不应该在没有充分理由的情况下覆盖

.svelte-kit/tsconfig.json

ts
{
	"compilerOptions": {
		"baseUrl": "..",
		"paths": {
			"$lib": "src/lib",
			"$lib/*": "src/lib/*"
		},
		"rootDirs": ["..", "./types"]
	},
	"include": ["../src/**/*.js", "../src/**/*.ts", "../src/**/*.svelte"],
	"exclude": ["../node_modules/**", "./**"]
}

其他选项对于 SvelteKit 正常工作是必需的，除非您知道自己在做什么，否则也应保持不变

.svelte-kit/tsconfig.json

ts
{
	"compilerOptions": {
		// this ensures that types are explicitly
		// imported with `import type`, which is
		// necessary as svelte-preprocess cannot
		// otherwise compile components correctly
		"importsNotUsedAsValues": "error",

		// Vite compiles one TypeScript module
		// at a time, rather than compiling
		// the entire module graph
		"isolatedModules": true,

		// TypeScript cannot 'see' when you
		// use an imported value in your
		// markup, so we need this
		"preserveValueImports": true,

		// This ensures both `vite build`
		// and `svelte-package` work correctly
		"lib": ["esnext", "DOM", "DOM.Iterable"],
		"moduleResolution": "node",
		"module": "esnext",
		"target": "esnext"
	}
}

App永久链接

Error永久链接

定义预期和意外错误的常见形状。使用 error 函数抛出预期错误。意外错误由 handleError 钩子处理，该钩子应返回此形状。

ts
interface Error {…}

ts
message: string;

Locals永久链接

定义 event.locals 的接口，可以在钩子（handle 和 handleError）、仅限服务器的 load 函数和 +server.js 文件中访问它。

ts
interface Locals {}

PageData永久链接

定义 $page.data store 的常见形状，即在所有页面之间共享的数据。./$types 中的 Load 和 ServerLoad 函数将相应地缩小。对仅存在于特定页面上的数据使用可选属性。不要添加索引签名（[key: string]: any）。

ts
interface PageData {}

PageState永久链接

$page.state 对象的形状，可以使用 $app/navigation 中的 pushState 和 replaceState 函数对其进行操作。

ts
interface PageState {}

平台永久链接

如果你的适配器通过 event.platform 提供特定于平台的上下文，你可以在这里指定它。

ts
interface Platform {}

上一个模块

下一个常见问题

类型

公共类型永久链接

Action永久链接

ActionFailure永久链接

ActionResult永久链接

Actions永久链接

Adapter永久链接

AfterNavigate永久链接

AwaitedActionspermalink

BeforeNavigatepermalink

Builderpermalink

配置永久链接

Cookie永久链接

模拟器永久链接

处理永久链接

HandleClientError永久链接

HandleFetch永久链接

HandleServerError永久链接

HttpError永久链接

KitConfig永久链接

LessThan永久链接

Load永久链接

LoadEvent永久链接

LoadPropertiespermalink

Navigationpermalink

NavigationEventpermalink

NavigationTarget永久链接

NavigationType永久链接

NumericRange永久链接

OnNavigate永久链接

Page永久链接

ParamMatcher永久链接

PrerenderOption永久链接

Redirect永久链接

RequestEvent永久链接

RequestHandler永久链接

Reroute永久链接

ResolveOptions永久链接

RouteDefinitionpermalink

SSRManifestpermalink

Serverpermalink

ServerInitOptionspermalink

ServerLoadpermalink

ServerLoadEventpermalink

Snapshotpermalink

SubmitFunctionpermalink

私有类型permalink

AdapterEntrypermalink

Csppermalink

CspDirectives永久链接

HttpMethod永久链接

Logger永久链接

MaybePromise永久链接

PrerenderEntryGeneratorMismatchHandler永久链接

PrerenderEntryGeneratorMismatchHandlerValue永久链接

PrerenderHttpErrorHandler永久链接

PrerenderHttpErrorHandlerValue永久链接

PrerenderMap永久链接

PrerenderMissingIdHandler永久链接

PrerenderMissingIdHandlerValue永久链接

PrerenderOption永久链接

Prerendered永久链接

RequestOptions永久链接

RouteSegment永久链接

TrailingSlash永久链接

生成的类型永久链接

默认 tsconfig.json永久链接

App永久链接

Error永久链接

Locals永久链接

PageData永久链接

PageState永久链接

平台永久链接