Types

Public typespermalink

以下の型は @sveltejs/kit からインポートすることができます:

Actionpermalink

+page.server.js にある export const actions = {..} の一部である form action メソッドの形です。詳細は form actions をご参照ください。

ts
interface 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
> {…}

ts
(event: RequestEvent<Params, RouteId>): MaybePromise<OutputData>;

ActionFailurepermalink

fail 関数が返すオブジェクトです

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

ts
status: number;

HTTP ステータスコード、400-599 の範囲内。

ts
data: T;

失敗(failure)に関連するデータ (例: validation errors)

ActionResultpermalink

fetch を通じて form action を呼び出したとき、そのレスポンスはこれらのうちいずれかの形となります。

<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 };

Actionspermalink

+page.server.js にある export const actions = {..} オブジェクトの形です。詳細は form 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>>;

Adapterpermalink

Adapters は、本番向けビルドを、あなたが選んだプラットフォームにデプロイできる形式に変換する役割を担います。

ts
interface Adapter {…}

ts
name: string;

adapter の名前です。ログに使用されます。通常はパッケージー名と同じものになります。

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

builder SvelteKit が提供するオブジェクトで、アプリを対象の環境に合わせる(adapt)ためのメソッドが含まれています

SvelteKit がアプリをビルドしたあとにこの関数が呼ばれます。

AfterNavigatepermalink

afterNavigate コールバックに渡される引数です。

ts
interface AfterNavigate extends Navigation {…}

ts
type: Omit<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]
  >;

AwaitedPropertiespermalink

ts
type AwaitedProperties<input extends Record<string, any> | void> =
  AwaitedPropertiesUnion<input> extends Record<string, any>
    ? OptionalUnion<AwaitedPropertiesUnion<input>>
    : AwaitedPropertiesUnion<input>;

BeforeNavigatepermalink

beforeNavigate コールバックに渡される引数です。

ts
interface BeforeNavigate extends Navigation {…}

ts
cancel(): void;

ナビゲーションを開始しないようにするためには、これを呼び出してください。

Builderpermalink

このオブジェクトは adapter の adapt 関数に渡されます。アプリを対象の環境に合わせる(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;

完全に解決(resolve)された svelte.config.js です。

ts
prerendered: Prerendered;

プリレンダリングされたページとアセット情報です (もしあれば)。

ts
routes: RouteDefinition[];

全てのルート (プリレンダリングされたものも含む) の配列です

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

fn 一連のルート(routes)をエントリーポイントにまとめる関数

アプリの1つ以上のルート(routes)にマップする別の関数を作成します。

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

静的な web サーバーが、マッチするルート(route)がない場合に使用するフォールバックページ(fallback page)を生成します。シングルページアプリにとって有用です。

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

opts アプリのベースディレクトリに対する相対パスと、オプションで、生成される manifest の形式 (esm または cjs) を指定

SvelteKit サーバーを初期化するためのサーバーサイド manifest を生成します。

ts
getBuildDirectory(name: string): string;

name ファイルへのパスで、ビルドディレクトリに対して相対

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 書き込み先のフォルダ
returns dest に書き込まれたファイルの配列

クライアントのアセットを dest に書き込みます。

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

dest 書き込み先のフォルダ
returns dest に書き込まれたファイルの配列

プリレンダリングされたファイルを dest に書き込みます。

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

dest 書き込み先のフォルダ
returns 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 ファイルはオリジナルと同じ場所に生成されます。

Cookiespermalink

ts
interface Cookies {…}

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

name cookie の名前
opts 直接 cookie.parse に渡されるオプション。ドキュメントはこちら

事前に cookies.set で設定された cookie や、またはリクエストヘッダーから cookie を取得します。

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

opts 直接 cookie.parse に直接渡されるオプションです。ドキュメントはこちら

事前に cookies.set で設定されたすべての cookie や、またはリクエストヘッダーからすべての cookie を取得します。

ts
set(name: string, value: string, opts?: import('cookie').CookieSerializeOptions): void;

name cookie の名前
value cookie の値
opts 直接 cookie.serialize に渡されるオプション。ドキュメントはこちら

cookie を設定します。これはレスポンスに set-cookie ヘッダーを追加し、また、現在のリクエスト中に cookies.get か cookies.getAll を通じてその cookie を利用可能にします。

httpOnly と secure オプションはデフォルトで true となっており (http://localhost の場合は例外として secure は false です)、クライアントサイドの JavaScript で cookie を読み取ったり、HTTP 上で送信したりしたい場合は、明示的に無効にする必要があります。sameSite オプションのデフォルトは lax です。

デフォルトでは、cookie の path は現在のパス名の 'ディレクトリ' です。ほとんどの場合、cookie をアプリ全体で利用可能にするには明示的に path: '/' を設定する必要があります。

ts
delete(name: string, opts?: import('cookie').CookieSerializeOptions): void;

name cookie の名前
opts 直接 cookie.serialize に渡されるオプション。path はあなたが削除したい cookie の path と一致する必要があります。ドキュメントはこちら

値に空文字列(empty string)を設定したり、有効期限(expiry date)を過去に設定することで、cookie を削除します。

ts
serialize(name: string, value: string, opts?: import('cookie').CookieSerializeOptions): string;

name cookie の名前
value cookie の値
opts 直接 cookie.serialize に渡されるオプション。ドキュメントはこちら

cookie の名前と値のペアを Set-Cookie ヘッダー文字列にシリアライズします。ただし、それをレスポンスに適用しないでください。

デフォルトでは、cookie の path は現在のパス名です。ほとんどの場合、cookie をアプリ全体で利用可能にするには明示的に path: '/' を設定する必要があります。

Handlepermalink

handle hook は SvelteKit サーバーがリクエストを受け取るたびに実行され、レスポンスを決定します。リクエストを表す event オブジェクトと、resolve と呼ばれる、ルート(route)をレンダリングして Response を生成する関数を受け取ります。これによってレスポンスヘッダーとボディを変更したり、SvelteKit を完全にバイパスすることができます (例えば、プログラムによるルート(routes)実装など)。

ts
interface Handle {…}

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

HandleClientErrorpermalink

クライアントサイドの handleError hook は、ナビゲーション中に予期せぬエラー(unexpected error)がスローされたときに実行されます。

もし予期せぬエラーが load かその後のレンダリング中にスローされた場合、この関数はその error と error と event を引数に取って呼び出されます。この関数では決してエラーをスローしないようにしてください。

ts
interface HandleClientError {…}

ts
(input: { error: unknown; event: NavigationEvent }): MaybePromise<void | App.Error>;

HandleFetchpermalink

handleFetch hook によって、サーバーで(またはプリレンダリング中に)実行される load 関数の内側で実行される fetch リクエストを変更 (または置換) することができます

ts
interface HandleFetch {…}

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

HandleServerErrorpermalink

サーバーサイドの handleError hook は、リクエストの応答中に予期せぬエラー(unexpected error)がスローされたときに実行されます。

もし予期せぬエラーが load かレンダリング中にスローされた場合、この関数はその error と event を引数に取って呼び出されます。この関数では決してエラーをスローしないようにしてください。

ts
interface HandleServerError {…}

ts
(input: { error: unknown; event: RequestEvent }): MaybePromise<void | App.Error>;

HttpErrorpermalink

error 関数が返すオブジェクトです

ts
interface HttpError {…}

ts
status: number;

HTTP ステータスコード、400-599 の範囲内。

ts
body: App.Error;

エラーのコンテンツ

KitConfigpermalink

ts
interface KitConfig {…}

詳細は configuration reference をご参照ください。

Loadpermalink

PageLoad と LayoutLoad のジェネリックなフォームです。Load を直接使用するのではなく、./$types (generated types 参照) からインポートしてください。

ts
interface 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
> {…}

ts
(event: LoadEvent<Params, InputData, ParentData, RouteId>): MaybePromise<OutputData>;

LoadEventpermalink

PageLoadEvent と LayoutLoadEvent のジェネリック型。LoadEvent を直接使用するのではなく、 ./$types (generated types 参照) をインポートしたほうが良いでしょう。

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 は、サーバーのコンテキストで使用する場合 origin 付きの URL が必要です)
サーバー上で実行されている場合、内部リクエスト (例えば +server.js ルート(routes)に対するリクエスト) は、直接ハンドラ関数を呼び出すので、HTTP を呼び出すオーバーヘッドがありません。
サーバーサイドレンダリングでは、レスポンスはキャプチャされ、レンダリングされた HTML にインライン化されます。ヘッダーは、filterSerializedResponseHeaders を介して明示的に含めない限り、シリアライズされないことにご注意ください。
ハイドレーションでは、レスポンスは HTML から読み取られるため、一貫性が保証され、追加のネットワークリクエストを防ぎます

Cookie は、ターゲットホストが Sveltekit アプリケーションと同じか、より明確・詳細(specific)なサブドメインである場合にのみ引き渡されます。

ts
data: Data;

ルート(route) の、+layout.server.js や +page.server.js にあるサーバー load 関数から返されたデータがあれば、それが含まれます。

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();
}

同じヘッダーを複数回設定することは (たとえ別々の load 関数であっても) エラーとなります。指定したヘッダーを設定できるのは一度だけです。

set-cookie ヘッダーは、setHeaders では追加できません。代わりに、サーバー load 関数で cookies API を使用してください。

ブラウザで load 関数を実行している場合、setHeaders には何の効果もありません。

ts
parent(): Promise<ParentData>;

await parent() は、親の +layout.js の load 関数から data を返します。 +layout.js が存在しない場合は、暗黙的に ({ data }) => data 関数として扱われます。つまり、親の +layout.server.js ファイルから data を返したり転送します。

await parent() を使用する場合、偶発的なウォーターフォールを引き起こさないようにご注意ください。例えば、親の data を戻り値にマージしたいだけであれば、他のデータを取得したあとにこれを呼び出すようにしてください。

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

この関数は、load 関数が1つ以上の URL またはカスタムの識別子に依存していることを宣言します。この依存関係は、あとで invalidate() で load を再実行させるのに使用されます。

fetch はあなたの代わりに depends を呼び出すので、ほとんどの場合これは必要ありません。必要になるのは、fetch をバイパスするカスタムの API クライアントを使用している場合のみです。

URL はロードされるページに対して絶対パスか相対パスで、エンコードされている必要があります。

カスタムの識別子は、URI 仕様に準拠するため、1つ以上の小文字で始まり、それに続いてコロンを付ける必要があります。

以下の例では、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.svelte

// @errors: 7031
<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
interface Navigation {…}

ts
from: NavigationTarget | null;

ナビゲーションがトリガーされた場所

ts
to: NavigationTarget | null;

ナビゲーションの行き先/行った先

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

ナビゲーションのタイプ:

form: ユーザーが <form> を送信した場合
leave: ユーザーがタブを閉じようとしたり戻る/進むボタンで違うドキュメントに行こうとしてアプリから離れようとした場合
link: リンクがクリックされてナビゲーションがトリガーされた場合
goto: goto(...) をコール、またはリダイレクトによってナビゲーションがトリガーされた場合
popstate: 戻る/進むによってナビゲーションがトリガーされた場合

ts
willUnload: boolean;

ナビゲーションの結果、ページがアンロードされるかどうか (すなわちクライアントサイドナビゲーションではない)

ts
delta?: number;

ヒストリーの戻る/進むナビゲーションの場合、戻る/進むのステップ数

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] というルート(route)の場合は、{ slug: string } オブジェクト

ts
route: {…}

現在のルート(route)に関する情報

ts
id: RouteId;

現在のルート(route)の ID - 例えば src/routes/blog/[slug] の場合は、/blog/[slug] となる

ts
url: URL;

現在のページの URL

NavigationTargetpermalink

特定のナビゲーションのターゲットに関する情報

ts
interface NavigationTarget {…}

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

ターゲットページのパラメータ - 例えば /blog/[slug] というルート(route)の場合、{ slug: string } オブジェクト。ターゲットが SvelteKit アプリではない場合 (ルート(route)として解決できない場合) は null となる。

ts
route: { id: string | null };

ターゲットのルート(route)に関する情報

ts
url: URL;

ナビゲーション先の URL

NavigationTypepermalink

enter: アプリがハイドレーションされた場合
form: ユーザーが <form> を送信した場合
leave: ユーザーがタブを閉じようとしたり戻る/進むボタンで違うドキュメントに行こうとしてアプリから離れようとした場合
link: リンクをクリックしてナビゲーションがトリガーされた場合
goto: goto(...) をコール、またはリダイレクトによってナビゲーションがトリガーされた場合
popstate: 戻る/進むによってナビゲーションがトリガーされた場合

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

Pagepermalink

$page store の形です

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] というルート(route)の場合は、{ slug: string } オブジェクト

ts
route: {…}

現在のルート(route)に関する情報

ts
id: RouteId;

現在のルート(route)の ID - 例えば src/routes/blog/[slug] の場合、/blog/[slug] となる

ts
status: number;

現在のページの Http ステータスコード

ts
error: App.Error | null;

現在のページのエラーオブジェクト(存在する場合)。handleError hook から注入される。

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

現在のページにおいて、全ての load 関数からの全ての data がマージされた結果。共通の部分については App.PageData を通じて型付けできます。

ts
form: any;

form が送信された後にのみ注入される。詳細については form actions を参照。

ParamMatcherpermalink

param matcher の形です。詳細については matching を参照。

ts
interface ParamMatcher {…}

ts
(param: string): boolean;

Redirectpermalink

redirect 関数が返すオブジェクトです

ts
interface Redirect {…}

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

HTTP ステータスコード。300-308 の範囲内。

ts
location: string;

リダイレクト先のロケーション。

RequestEventpermalink

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 は、サーバーのコンテキストで使用する場合 origin 付きの URL が必要です)
サーバー上で実行されている場合、内部リクエスト (例えば +server.js ルート(routes)に対するリクエスト) は、直接ハンドラ関数を呼び出すので、HTTP を呼び出すオーバーヘッドがありません

Cookie は、ターゲットホストが SvelteKit アプリケーションと同じか、より明確・詳細(specific)なサブドメインである場合にのみ引き渡されます。

ts
getClientAddress(): string;

クライアントの IP アドレスで、adapter によって設定される。

ts
locals: App.Locals;

handle hook 内でリクエストに追加されるカスタムの data が含まれる。

ts
params: Params;

現在のルート(route)のパラメータ - 例えば /blog/[slug] というルート(route)の場合は、{ slug: string } オブジェクト

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

adapter を通じて利用可能になる追加の data。

ts
request: Request;

オリジナルのリクエストオブジェクト

ts
route: {…}

現在のルート(route)に関する情報

ts
id: RouteId;

現在のルート(route)の 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();
}

同じヘッダーを複数回設定することは (たとえ別々の load 関数であっても) エラーとなります。指定したヘッダーを設定できるのは一度だけです。

set-cookie ヘッダーは、setHeaders では追加できません。代わりに、cookies API を使用してください。

ts
url: URL;

リクエストされた URL。

ts
isDataRequest: boolean;

クライアントから +page/layout.server.js の data を要求するリクエストが来た場合は true となります。この場合、url プロパティからその data へのリクエストに関する内部情報が取り除かれます。もしあなたにとってこの区別が重要な場合、このプロパティを使用してください。

RequestHandlerpermalink

(event: RequestEvent) => Response という関数で、+server.js ファイルからエクスポートされます。HTTP verb (GET, PUT, PATCH, etc) に対応しており、それぞれの HTTP メソッドのリクエストを処理します。

1つめのジェネリックな引数(first generic argument)として Params を受け取りますが、代わりに generated types を使うことでこれをスキップすることができます。

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

ts
(event: RequestEvent<Params, RouteId>): MaybePromise<Response>;

ResolveOptionspermalink

ts
interface ResolveOptions {…}

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

input html のチャンクとこれが最後のチャンクかどうかの情報

カスタムの変換を HTML に適用します。done が true である場合、それは最後のチャンクです。チャンクが整形された HTML であることは保証されませんが (例えば、要素の開始タグは含むが終了タグは含まれない、など)、常に %sveltekit.head% やレイアウト(layout)/ページ(page)コンポーネントなどのような理にかなった境界 (sensible boundaries) で分割されます。

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

name ヘッダーの名前
value ヘッダーの値

load 関数が fetch でリソースを読み込むときに、シリアライズされるレスポンスにどのヘッダーを含めるかを決定します。デフォルトでは何も含まれません。

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

input ファイルのタイプとそのパス

<head> タグにどのファイルをプリロードの対象として追加するか決定します。デフォルトでは、js、css、font ファイルがプリロードされます。

RouteDefinitionpermalink

ts
interface RouteDefinition<Config = any> {…}

ts
id: string;

ts
api: {
  methods: HttpMethod[];
};

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

ts
pattern: RegExp;

ts
prerender: PrerenderOption;

ts
segments: RouteSegment[];

ts
methods: HttpMethod[];

ts
config: Config;

SSRManifestpermalink

ts
interface SSRManifest {…}

ts
appDir: string;

ts
appPath: string;

ts
assets: Set<string>;

ts
mimeTypes: Record<string, string>;

ts
_: {
  client: {
    start: AssetDependencies;
    app: AssetDependencies;
  };
  nodes: SSRNodeLoader[];
  routes: SSRRoute[];
  matchers(): Promise<Record<string, ParamMatcher>>;
};

private fields

Serverpermalink

ts
class Server {
  constructor(manifest: SSRManifest);
  init(options: ServerInitOptions): Promise<void>;
  respond(request: Request, options: RequestOptions): Promise<Response>;
}

ServerInitOptionspermalink

ts
interface ServerInitOptions {…}

ts
env: Record<string, string>;

ServerLoadpermalink

PageServerLoad と LayoutServerLoad のジェネリックなフォームです。ServerLoad を直接使用するのではなく、./$types (generated types を参照) からインポートしてください。

ts
interface 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
> {…}

ts
(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 関数から data を返します。

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

URL はロードされるページに対して絶対パスか相対パスで、エンコードされている必要があります。

カスタムの識別子は、URI 仕様に準拠するため、1つ以上の小文字で始まり、それに続いてコロンを付ける必要があります。

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.svelte

// @errors: 7031
<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>

Snapshotpermalink

The type of export const snapshot exported from a page or layout component.

ts
interface Snapshot<T = any> {…}

ts
capture: () => T;

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

SubmitFunctionpermalink

ts
interface SubmitFunction<
  Success extends Record<string, unknown> | undefined = Record<string, any>,
  Failure extends Record<string, unknown> | undefined = Record<string, any>
> {…}

ts
(input: {
  action: URL;
  data: FormData;
  form: HTMLFormElement;
  controller: AbortController;
  submitter: HTMLElement | null;
  cancel(): void;
}): MaybePromise<
  | void
  | ((opts: {
      form: HTMLFormElement;
      action: URL;
      result: ActionResult<Success, Failure>;
      /**
       * フォーム送信(form submission)のレスポンスのデフォルトの動作を取得するためにこれを呼び出します。
       * @param options 送信(submission)に成功したあとに `<form>` の値をリセットしたくない場合は、`reset: false` を設定します。
       */
      update(options?: { reset: boolean }): Promise<void>;
    }) => void)
>;

Private typespermalink

以下は上記の public types から参照されていますが、直接インポートすることはできません:

AdapterEntrypermalink

ts
interface AdapterEntry {…}

ts
id: string;

HTTP サービス (例: serverless function) を一意に識別するための文字列で、重複を排除するために使用されます。例えば、/foo/a-[b] と /foo/[c] は別のルート(routes)ですが、 Netlify の _redirects ファイルではどちらも /foo/:param として表現されるので、ID を共有します

ts
filter(route: RouteDefinition): boolean;

候補のルート(route)と現在のルート(route)を比較し、候補のルートを現在のルートのフォールバック(fallback)として扱うべきかどうかを判断する関数です。

Use cases:

Fallback pages: /foo/[c] is a fallback for /foo/a-[b], and /[...catchall] is a fallback for all routes
Grouping routes that share a common config: /foo should be deployed to the edge, /bar and /baz should be deployed to a serverless function

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[];
  type UriPath = `${HttpDelineator}${string}`;
}

CspDirectivespermalink

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'?: Csp.UriPath[];

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'
>;

HttpMethodpermalink

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

Loggerpermalink

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;

MaybePromisepermalink

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

PrerenderHttpErrorHandlerpermalink

ts
interface PrerenderHttpErrorHandler {…}

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

PrerenderHttpErrorHandlerValuepermalink

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

PrerenderMappermalink

ts
type PrerenderMap = Map<string, PrerenderOption>;

PrerenderMissingIdHandlerpermalink

ts
interface PrerenderMissingIdHandler {…}

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

PrerenderMissingIdHandlerValuepermalink

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

PrerenderOptionpermalink

ts
type PrerenderOption = boolean | 'auto';

Prerenderedpermalink

ts
interface Prerendered {…}

ts
pages: Map<
  string,
  {
    /** .html ファイルのロケーションで、output ディレクトリからの相対です */
    file: string;
  }
>;

path と { file } オブジェクトの map で、/foo という path に対応する foo.html、/bar/ という path に対応する bar/index.html、となります。

ts
assets: Map<
  string,
  {
    /** アセット(asset) の MIME type です */
    type: string;
  }
>;

path と { type } オブジェクトの map です。

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

プリレンダリング中に発生したリダイレクトの map です。

ts
paths: string[];

プリレンダリングされた path の配列 (trailingSlash の設定に関わらず、末尾のスラッシュは取り除かれる)

RequestOptionspermalink

ts
interface RequestOptions {…}

ts
getClientAddress(): string;

ts
platform?: App.Platform;

RouteSegmentpermalink

ts
interface RouteSegment {…}

ts
content: string;

ts
dynamic: boolean;

ts
rest: boolean;

TrailingSlashpermalink

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

UniqueInterfacepermalink

ts
interface UniqueInterface {…}

ts
readonly [uniqueSymbol]: unknown;

Generated typespermalink

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
import type { RequestHandler } from '@sveltejs/kit';
 
export const GET = (async ({ params }) => {
  // ...
}) satisfies RequestHandler<{
Type '({ params }: RequestEvent<{ foo: string; bar: string; baz: string; }, string | null>) => Promise<void>' does not satisfy the expected 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'.1360Type '({ params }: RequestEvent<{ foo: string; bar: string; baz: string; }, string | null>) => Promise<void>' does not satisfy the expected 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
}>;

言うまでもなく、これを書くのは面倒で、移植性も低いです ([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 = (async ({ params }) => {
  // ...
}) satisfies PageServerLoad;

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 = (async ({ params, fetch }) => {
  // ...
}) satisfies PageLoad;

これを動作させるためには、tsconfig.json または jsconfig.json が生成された .svelte-kit/tsconfig.json を継承する必要があります (.svelte-kit の場所は outDir です):
{ "extends": "./.svelte-kit/tsconfig.json" }

Default tsconfig.jsonpermalink

生成された .svelte-kit/tsconfig.json ファイルには様々なオプションが含まれています。いくつかのオプションはプロジェクトの設定に基づいてプログラム的に生成されており、通常は、適切な理由なしに上書きするべきではありません。

.svelte-kit/tsconfig.json

{
  "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

{
  "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"
  }
}

Apppermalink

App namespace を宣言することで、アプリ内のオブジェクトを型付けする方法を SvelteKit に伝えることが可能です。デフォルトでは、新しいプロジェクトには src/app.d.ts というファイルがあり、以下の内容を含んでいます:

ts
declare global {
  namespace App {
    // interface Error {}
    // interface Locals {}
    // interface PageData {}
    // interface Platform {}
  }
}
 
export {};

export {} の行がないと、このファイルは ambient module として扱われてしまい、import 宣言を追加することができなくなります。 ambient な declare module 宣言を追加する必要がある場合は、src/ambient.d.ts のように別のファイルに記述してください。

これらのインターフェースを作成することによって、event.locals、event.platform、load 関数の data を使用する際に型の安全性を確保することができます。

Errorpermalink

想定されるエラーと予期せぬエラーの共通の形を定義します。想定されるエラーは error 関数を使用してスローされます。予期せぬエラーは handleError hooks で処理され、この形を返す必要があります。

ts
interface Error {…}

ts
message: string;

Localspermalink

event.locals を定義する interface です。event.locals は hooks (handle、handleError)、load 関数(サーバーのみ)、+server.js ファイルからアクセスできます。

ts
interface Locals {}

PageDatapermalink

$page.data store の共通の形、つまり全てのページ間で共有されるデータを定義します。 ./$types にある Load と ServerLoad 関数が絞り込まれます。特定のページにしか存在しないデータについては、オプションのプロパティを使用してください。インデックスシグネチャ ([key: string]: any) を追加しないでください。

ts
interface PageData {}

Platformpermalink

adapter が event.platform でプラットフォーム固有の情報を提供する場合、ここでそれを指定することができます。

ts
interface Platform {}

previous Modules

next Integrations

Types

Public typespermalink

Actionpermalink

ActionFailurepermalink

ActionResultpermalink

Actionspermalink

Adapterpermalink

AfterNavigatepermalink

AwaitedActionspermalink

AwaitedPropertiespermalink

BeforeNavigatepermalink

Builderpermalink

Configpermalink

Cookiespermalink

Handlepermalink

HandleClientErrorpermalink

HandleFetchpermalink

HandleServerErrorpermalink

HttpErrorpermalink

KitConfigpermalink

Loadpermalink

LoadEventpermalink

Navigationpermalink

NavigationEventpermalink

NavigationTargetpermalink

NavigationTypepermalink

Pagepermalink

ParamMatcherpermalink

Redirectpermalink

RequestEventpermalink

RequestHandlerpermalink

ResolveOptionspermalink

RouteDefinitionpermalink

SSRManifestpermalink

Serverpermalink

ServerInitOptionspermalink

ServerLoadpermalink

ServerLoadEventpermalink

Snapshotpermalink

SubmitFunctionpermalink

Private typespermalink

AdapterEntrypermalink

Csppermalink

CspDirectivespermalink

HttpMethodpermalink

Loggerpermalink

MaybePromisepermalink

PrerenderHttpErrorHandlerpermalink

PrerenderHttpErrorHandlerValuepermalink

PrerenderMappermalink

PrerenderMissingIdHandlerpermalink

PrerenderMissingIdHandlerValuepermalink

PrerenderOptionpermalink

Prerenderedpermalink

RequestOptionspermalink

RouteSegmentpermalink

TrailingSlashpermalink

UniqueInterfacepermalink

Generated typespermalink

Default tsconfig.jsonpermalink

Apppermalink

Errorpermalink

Localspermalink

PageDatapermalink

Platformpermalink