SvelteKit参考

类型

生成的类型(Generated types)

¥Generated types

RequestHandler 和 Load 类型都接受 Params 参数，允许你输入 params 对象。例如，此端点需要 foo、bar 和 baz 参数：

¥The RequestHandler and Load types both accept a Params argument allowing you to type the params object. For example this endpoint expects foo, bar and baz params:

src/routes/[foo]/[bar]/[baz]/+server

/** @type {import('@sveltejs/kit').RequestHandler<{
	foo: string;
	bar: string;
	baz: string
  }>} */
export async function function GET({ params }: {
    params: any;
}): Promise<void>@type{import('@sveltejs/kit').RequestHandler<{
	foo: string;
	bar: string;
	baz: string
  }>}GET({ params: anyparams }) {
	// ...
}

import type { type RequestHandler<Params extends Partial<Record<string, string>> = Partial<Record<string, string>>, RouteId extends string | null = string | null> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>A (event: RequestEvent) => Response function exported from a +server.js file that corresponds to an HTTP verb (GET, PUT, PATCH, etc) and handles requests with that method.
It receives Params as the first generic argument, which you can skip by using generated types instead.
RequestHandler } from '@sveltejs/kit';
export const const GET: RequestHandler<{
    foo: string;
    bar: string;
    baz: string;
}>GET: type RequestHandler<Params extends Partial<Record<string, string>> = Partial<Record<string, string>>, RouteId extends string | null = string | null> = (event: RequestEvent<Params, RouteId>) => MaybePromise<Response>A (event: RequestEvent) => Response function exported from a +server.js file that corresponds to an HTTP verb (GET, PUT, PATCH, etc) and handles requests with that method.
It receives Params as the first generic argument, which you can skip by using generated types instead.
RequestHandler<{
	foo: stringfoo: string;
	bar: stringbar: string;
	baz: stringbaz: string
  }> = async ({ params: {
    foo: string;
    bar: string;
    baz: string;
}The parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object
params }) => {
	// ...
};

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

¥Needless to say, this is cumbersome to write out, and less portable (if you were to rename the [foo] directory to [qux], the type would no longer reflect reality).

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

¥To solve this problem, SvelteKit generates .d.ts files for each of your endpoints and pages:

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

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

type type RouteParams = {
    foo: string;
    bar: string;
    baz: string;
}RouteParams = {
	foo: stringfoo: string;
	bar: stringbar: string;
	baz: stringbaz: string;
};

export type type RequestHandler = (event: Kit.RequestEvent<RouteParams, string | null>) => MaybePromise<Response>RequestHandler = module "@sveltejs/kit"Kit.type RequestHandler<Params extends Partial<Record<string, string>> = Partial<Record<string, string>>, RouteId extends string | null = string | null> = (event: Kit.RequestEvent<Params, RouteId>) => MaybePromise<Response>A (event: RequestEvent) => Response function exported from a +server.js file that corresponds to an HTTP verb (GET, PUT, PATCH, etc) and handles requests with that method.
It receives Params as the first generic argument, which you can skip by using generated types instead.
RequestHandler<type RouteParams = {
    foo: string;
    bar: string;
    baz: string;
}RouteParams>;
export type type PageLoad = (event: Kit.LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = module "@sveltejs/kit"Kit.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<...>, OutputData extends Record<string, unknown> | void = void | Record<...>, RouteId extends string | null = string | null> = (event: Kit.LoadEvent<Params, InputData, ParentData, RouteId>) => MaybePromise<OutputData>The generic form of PageLoad and LayoutLoad. You should import those from ./$types (see generated types)
rather than using Load directly.
Load<type RouteParams = {
    foo: string;
    bar: string;
    baz: string;
}RouteParams>;

由于 TypeScript 配置中的 rootDirs 选项，这些文件可以作为同级文件导入到你的端点和页面中：

¥These files can be imported into your endpoints and pages as siblings, thanks to the rootDirs option in your TypeScript configuration:

src/routes/[foo]/[bar]/[baz]/+server

/** @type {import('./$types').RequestHandler} */
export async function GET({ params: RouteParamsThe parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object
params }) {
	// ...
}

import type { type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>RequestHandler } from './$types';

export const GET: type RequestHandler = (event: RequestEvent<RouteParams, string | null>) => MaybePromise<Response>RequestHandler = async ({ params: RouteParamsThe parameters of the current route - e.g. for a route like /blog/[slug], a { slug: string } object
params }) => {
	// ...
};

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

/** @type {import('./$types').PageLoad} */
export async function function load(event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>): MaybePromise<void | Record<string, any>>@type{import('./$types').PageLoad}load({ params: RouteParamsThe parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object
params, fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response>;
}fetch is equivalent to the native fetch web API, with a few additional features:

It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.

You can learn more about making credentialed requests with cookies here
fetch }) {
	// ...
}

import type { type PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad } from './$types';

export const const load: PageLoadload: type PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>PageLoad = async ({ params: RouteParamsThe parameters of the current page - e.g. for a route like /blog/[slug], a { slug: string } object
params, fetch: {
    (input: RequestInfo | URL, init?: RequestInit): Promise<Response>;
    (input: string | URL | globalThis.Request, init?: RequestInit): Promise<Response>;
}fetch is equivalent to the native fetch web API, with a few additional features:

It can be used to make credentialed requests on the server, as it inherits the cookie and authorization headers for the page request.
It can make relative requests on the server (ordinarily, fetch requires a URL with an origin when used in a server context).
Internal requests (e.g. for +server.js routes) go directly to the handler function when running on the server, without the overhead of an HTTP call.
During server-side rendering, the response will be captured and inlined into the rendered HTML by hooking into the text and json methods of the Response object. Note that headers will not be serialized, unless explicitly included via filterSerializedResponseHeaders
During hydration, the response will be read from the HTML, guaranteeing consistency and preventing an additional network request.

You can learn more about making credentialed requests with cookies here
fetch }) => {
	// ...
};

然后，加载函数的返回类型分别通过 $types 模块作为 PageData 和 LayoutData 提供，而所有 Actions 的返回值的并集作为 ActionData 提供。

¥The return types of the load functions are then available through the $types module as PageData and LayoutData respectively, while the union of the return values of all Actions is available as ActionData.

从 2.16.0 版开始，提供了两种额外的辅助程序类型：当定义了操作时，PageProps 定义 data: PageData 和 form: ActionData，而 LayoutProps 定义 data: LayoutData 和 children: Snippet。

¥Starting with version 2.16.0, two additional helper types are provided: PageProps defines data: PageData, as well as form: ActionData, when there are actions defined, while LayoutProps defines data: LayoutData, as well as children: Snippet.

src/routes/+page

<script>
	/** @type {import('./$types').PageProps} */
	let { data, form } = $props();
</script>

<script lang="ts">
	import type { PageProps } from './$types';

	let { data, form }: PageProps = $props();
</script>

Legacy mode
2.16.0 之前：

¥[!LEGACY] Before 2.16.0:

.svelte-kit/tsconfig

> > <script>
> 	/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
> 	let { data, form } = $props();
> </script>
> ```

> 使用 Svelte 4：
>
> ¥Using Svelte 4:

```svelte
> > <script>
>   /** @type {import('./$types').PageData} */
>   export let data;
>   /** @type {import('./$types').ActionData} */
>   export let form;
> </script>
> ```

> [!NOTE] 为了实现这一点，你自己的 `tsconfig.json` 或 `jsconfig.json` 应该从生成的 `.svelte-kit/tsconfig.json` 扩展（其中 `.svelte-kit` 是你的 [`outDir`](configuration#outDir)）：
>
> ¥[!NOTE] For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](configuration#outDir)):
>
> `{ "extends": "./.svelte-kit/tsconfig.json" }`

### 默认 tsconfig.json(Default tsconfig.json)

¥Default tsconfig.json

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

¥The generated `.svelte-kit/tsconfig.json` file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason:

```json
{
	"compilerOptions": {
		"paths": {
			"$lib": ["../src/lib"],
			"$lib/*": ["../src/lib/*"]
		},
		"rootDirs": ["..", "./types"]
	},
	"include": [
		"ambient.d.ts",
		"non-ambient.d.ts",
		"./types/**/$types.d.ts",
		"../vite.config.js",
		"../vite.config.ts",
		"../src/**/*.js",
		"../src/**/*.ts",
		"../src/**/*.svelte",
		"../tests/**/*.js",
		"../tests/**/*.ts",
		"../tests/**/*.svelte"
	],
	"exclude": [
		"../node_modules/**",
		"../src/service-worker.js",
		"../src/service-worker/**/*.js",
		"../src/service-worker.ts",
		"../src/service-worker/**/*.ts",
		"../src/service-worker.d.ts",
		"../src/service-worker/**/*.d.ts"
	]
}

> > <script lang="ts">
> 	/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
> 	let { data, form } = $props();
> 
</script>
> ```

> 使用 Svelte 4：
>
> ¥Using Svelte 4:

```svelte
> > <script>
>   /** @type {import('./$types').PageData} */
>   export let data;
>   /** @type {import('./$types').ActionData} */
>   export let form;
> </script>
> ```

> [!NOTE] 为了实现这一点，你自己的 `tsconfig.json` 或 `jsconfig.json` 应该从生成的 `.svelte-kit/tsconfig.json` 扩展（其中 `.svelte-kit` 是你的 [`outDir`](configuration#outDir)）：
>
> ¥[!NOTE] For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](configuration#outDir)):
>
> `{ "extends": "./.svelte-kit/tsconfig.json" }`

### 默认 tsconfig.json(Default tsconfig.json)

¥Default tsconfig.json

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

¥The generated `.svelte-kit/tsconfig.json` file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason:

```json
{
	"compilerOptions": {
		"paths": {
			"$lib": ["../src/lib"],
			"$lib/*": ["../src/lib/*"]
		},
		"rootDirs": ["..", "./types"]
	},
	"include": [
		"ambient.d.ts",
		"non-ambient.d.ts",
		"./types/**/$types.d.ts",
		"../vite.config.js",
		"../vite.config.ts",
		"../src/**/*.js",
		"../src/**/*.ts",
		"../src/**/*.svelte",
		"../tests/**/*.js",
		"../tests/**/*.ts",
		"../tests/**/*.svelte"
	],
	"exclude": [
		"../node_modules/**",
		"../src/service-worker.js",
		"../src/service-worker/**/*.js",
		"../src/service-worker.ts",
		"../src/service-worker/**/*.ts",
		"../src/service-worker.d.ts",
		"../src/service-worker/**/*.d.ts"
	]
}

其他内容是 SvelteKit 正常工作所必需的，除非你知道自己在做什么，否则也应保持不变：

¥Others are required for SvelteKit to work properly, and should also be left untouched unless you know what you’re doing:

.svelte-kit/tsconfig

{
	"compilerOptions": {
		// this ensures that types are explicitly
		// imported with `import type`, which is
		// necessary as Svelte/Vite cannot
		// otherwise compile components correctly
		"verbatimModuleSyntax": true,

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

		// Tell TS it's used only for type-checking
		"noEmit": true,

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

$lib

这是 src/lib 的简单别名，或指定为 config.kit.files.lib 的任何目录。它允许你访问通用组件和实用程序模块，而无需 ../../../../ 废话。

¥This is a simple alias to src/lib, or whatever directory is specified as config.kit.files.lib. It allows you to access common components and utility modules without ../../../../ nonsense.

$lib/server

$lib 的子目录。SvelteKit 将阻止你将 $lib/server 中的任何模块导入客户端代码。参见服务器专用模块。

¥A subdirectory of $lib. SvelteKit will prevent you from importing any modules in $lib/server into client-side code. See server-only modules.

app.d.ts

app.d.ts 文件是你应用的环境类型的所在地，即无需明确导入即可使用的类型。

¥The app.d.ts file is home to the ambient types of your apps, i.e. types that are available without explicitly importing them.

此文件始终是 App 命名空间的一部分。此命名空间包含几种类型，这些类型会影响你与之交互的某些 SvelteKit 功能的形状。

¥Always part of this file is the App namespace. This namespace contains several types that influence the shape of certain SvelteKit features you interact with.

错误(Error)

¥Error

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

¥Defines the common shape of expected and unexpected errors. Expected errors are thrown using the error function. Unexpected errors are handled by the handleError hooks which should return this shape.

interface Error {…}

message: string;

本地(Locals)

¥Locals

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

¥The interface that defines event.locals, which can be accessed in server hooks (handle, and handleError), server-only load functions, and +server.js files.

interface Locals {}

PageData

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

¥Defines the common shape of the page.data state and $page.data store - that is, the data that is shared between all pages. The Load and ServerLoad functions in ./$types will be narrowed accordingly. Use optional properties for data that is only present on specific pages. Do not add an index signature ([key: string]: any).

interface PageData {}

PageState

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

¥The shape of the page.state object, which can be manipulated using the pushState and replaceState functions from $app/navigation.

interface PageState {}

平台(Platform)

¥Platform

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

¥If your adapter provides platform-specific context via event.platform, you can specify it here.

interface Platform {}

命令行接口