## 
生成类型

请求处理器`RequestHandler`和`Load`类型都接受一个`Params`参数，允许您输入`params`对象。例如，此端点期望`foo`、`bar`和`baz`参数：

```js
/// file: src/routes/[foo]/[bar]/[baz]/+server.js
// @errors: 2355 2322 1360
/** @type {import('@sveltejs/kit').RequestHandler<{
    foo: string;
    bar: string;
    baz: string
  }>} */
export async function GET({ params }) {
	// ...
}
```

不用说，这写起来很麻烦，而且不太便携（如果你要将`[foo]`目录重命名为`[qux]`，类型将不再反映现实）。

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

```ts
/// file: .svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d.ts
/// link: true
import type * as Kit from '@sveltejs/kit';

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

export type RequestHandler = Kit.RequestHandler<RouteParams>;
export type PageLoad = Kit.Load<RouteParams>;
```

这些文件可以导入到您的端点和页面中作为同级，多亏了 TypeScript 配置中的[`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs)选项：

```js
/// file: src/routes/[foo]/[bar]/[baz]/+server.js
// @filename: $types.d.ts
import type * as Kit from '@sveltejs/kit';

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

export type RequestHandler = Kit.RequestHandler<RouteParams>;

// @filename: index.js
// @errors: 2355 2322
// ---cut---
/** @type {import('./$types').RequestHandler} */
export async function GET({ params }) {
	// ...
}
```

```js
/// file: src/routes/[foo]/[bar]/[baz]/+page.js
// @filename: $types.d.ts
import type * as Kit from '@sveltejs/kit';

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

export type PageLoad = Kit.Load<RouteParams>;

// @filename: index.js
// @errors: 2355
// ---cut---
/** @type {import('./$types').PageLoad} */
export async function load({ params, fetch }) {
	// ...
}
```

返回类型通过 `$types` 模块分别作为 `PageData` 和 `LayoutData` 可用，而所有 `Actions` 返回值的并集则可用作 `ActionData`。

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

```svelte
<!--- file: src/routes/+page.svelte --->
<script>
	/** @type {import('./$types').PageProps} */
	let { data, form } = $props();
</script>
```

> \[!旧版\] 在 2.16.0 之前：
> 
> ```svelte
> <!--- file: src/routes/+page.svelte --->
> <script>
> 	/** @type {{ data: import('./$types').PageData, form: import('./$types').ActionData }} */
> 	let { data, form } = $props();
> </script>
> ```
> 
> 使用 Svelte 4：
> 
> ```svelte
> <!--- file: src/routes/+page.svelte --->
> <script>
>   /** @type {import('./$types').PageData} */
>   export let data;
>   /** @type {import('./$types').ActionData} */
>   export let form;
> </script>
> ```

> \[!注意\] 要使此功能正常工作，您的自己的 `tsconfig.json` 或 `jsconfig.json` 应从生成的 `.svelte-kit/tsconfig.json` 扩展（其中 `.svelte-kit` 是您的 [`outDir`](configuration#outDir)）：
> 
> `{ "extends": "./.svelte-kit/tsconfig.json" }`

### 
默认 tsconfig.json

生成的 `.svelte-kit/tsconfig.json` 文件包含多种选项。其中一些是根据您的项目配置自动生成的，通常在没有充分理由的情况下不应更改：

```json
/// file: .svelte-kit/tsconfig.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 正常运行，除非你了解自己在做什么，否则应保持不变：

```json
/// file: .svelte-kit/tsconfig.json
{
	"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`](configuration#files)。它允许您在不使用 `../../../../` 无聊的路径的情况下访问常用组件和实用模块。

### $lib/server

子目录位于`$lib`中。SvelteKit 将阻止您将`$lib/server`中的任何模块导入到客户端代码中。请参阅[仅服务器端模块](server-only-modules)。

## app.d.ts

The `app.d.ts` 文件是您应用程序的环境类型所在之处，即无需显式导入即可使用的类型。

始终是此文件的一部分是 `App` 命名空间。此命名空间包含几个影响您交互的某些 SvelteKit 功能的类型的形状。

## 
错误

定义了预期和意外错误的通用形状。预期错误通过使用`error`函数抛出。意外错误由`handleError`钩子处理，这些钩子应返回此形状。

`接口 Error {/*…*/}`

`消息：字符串；`

## 
本地

接口定义了 `event.locals`，该变量可在服务器 [钩子](/docs/kit/hooks)（`handle` 和 `handleError`）、仅服务器 `load` 函数以及 `+server.js` 文件中访问。

`接口 Locals {}`

## 
页面数据

定义了[页面数据状态](/docs/kit/$app-state#page)的通用形状以及\[ $page.data store](/docs/kit/$ app-stores#page) - 即，所有页面之间共享的数据。在`./$types`中的`Load`和`ServerLoad`函数将被相应地缩小。对于仅在特定页面上存在的数据，使用可选属性。不要添加索引签名（`[key: string]: any`）。

`接口 PageData {}`

## 
页面状态

页面状态对象 `page.state` 的形状，可以使用来自 `$app/navigation` 的 [`pushState`](/docs/kit/$app-navigation#pushState) 和 [`replaceState`](/docs/kit/$app-navigation#replaceState) 函数进行操作。

`页面状态接口 {}`

## 
平台

如果您的适配器通过 [平台特定上下文](/docs/kit/adapters#Platform-specific-context) 通过 `event.platform` 提供，您可以在此指定它。

`平台接口 {}`