类型
生成的类型(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:
/** @type {import('@sveltejs/kit').RequestHandler<{
foo: string;
bar: string;
baz: string
}>} */
export async function function GET({ params }: {
params: any;
}): Promise<void>
GET({ params: any
params }) {
// ...
}
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: string
foo: string;
bar: string
bar: string;
baz: string
baz: 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:
import type * as module "@sveltejs/kit"
Kit from '@sveltejs/kit';
type type RouteParams = {
foo: string;
bar: string;
baz: string;
}
RouteParams = {
foo: string
foo: string;
bar: string
bar: string;
baz: string
baz: 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:
/** @type {import('./$types').RequestHandler} */
export async function GET({ params: RouteParams
The 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: RouteParams
The parameters of the current route - e.g. for a route like /blog/[slug]
, a { slug: string }
object
params }) => {
// ...
};
/** @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>>
load({ params: RouteParams
The 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: PageLoad
load: type PageLoad = (event: LoadEvent<RouteParams, Record<string, any> | null, Record<string, any>, string | null>) => MaybePromise<void | Record<string, any>>
PageLoad = async ({ params: RouteParams
The 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
.
<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:
> > <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:
{
"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 {}