Types
Edit this page on GitHubPublic 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
ActionFailurepermalink
fail
関数が返すオブジェクトです
ts
interface ActionFailure<T extends Record<string, unknown> | undefined = undefined
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
Adapterpermalink
Adapters は、本番向けビルドを、あなたが選んだプラットフォームにデプロイできる形式に変換する役割を担います。
ts
interface Adapter {…}
ts
name: string;
adapter の名前です。ログに使用されます。通常はパッケージー名と同じものになります。
ts
builder
SvelteKit が提供するオブジェクトで、アプリを対象の環境に合わせる(adapt)ためのメソッドが含まれています
SvelteKit がアプリをビルドしたあとにこの関数が呼ばれます。
AfterNavigatepermalink
afterNavigate
コールバックに渡される引数です。
ts
ts
ナビゲーションのタイプ:
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
ts
cancel(): void;
ナビゲーションを開始しないようにするためには、これを呼び出してください。
Builderpermalink
このオブジェクトは adapter の adapt
関数に渡されます。
アプリを対象の環境に合わせる(adapt)のに役立つ様々なメソッドとプロパティが含まれています。
ts
interface Builder {…}
ts
メッセージをコンソールにプリントします。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
プリレンダリングされたページとアセット情報です (もしあれば)。
ts
全てのルート (プリレンダリングされたものも含む) の配列です
ts
fn
一連のルート(routes)をエントリーポイントにまとめる関数
アプリの1つ以上のルート(routes)にマップする別の関数を作成します。
ts
generateFallback(dest: string): Promise<void>;
静的な web サーバーが、マッチするルート(route)がない場合に使用するフォールバックページ(fallback page)を生成します。シングルページアプリにとって有用です。
ts
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
ファイルはオリジナルと同じ場所に生成されます。
Configpermalink
ts
interface Config {…}
詳細は configuration reference をご参照ください。
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 を削除します。
デフォルトでは、cookie の path
は現在のパス名の 'ディレクトリ' です。ほとんどの場合、cookie をアプリ全体で利用可能にするには明示的に path: '/'
を設定する必要があります。
ts
serialize(name: string, value: string, opts?: import('cookie').CookieSerializeOptions): string;
name
cookie の名前value
cookie の値opts
直接cookie.serialize
に渡されるオプション。ドキュメントはこちら
cookie の名前と値のペアを Set-Cookie ヘッダー文字列にシリアライズします。ただし、それをレスポンスに適用しないでください。
httpOnly
と secure
オプションはデフォルトで true
となっており (http://localhost の場合は例外として secure
は false
です)、クライアントサイドの JavaScript で cookie を読み取ったり、HTTP 上で送信したりしたい場合は、明示的に無効にする必要があります。sameSite
オプションのデフォルトは lax
です。
デフォルトでは、cookie の path
は 現在のパス名です。ほとんどの場合、cookie をアプリ全体で利用可能にするには明示的に path: '/'
を設定する必要があります。
Handlepermalink
handle
hook は SvelteKit サーバーがリクエストを受け取るたびに実行され、
レスポンスを決定します。
リクエストを表す event
オブジェクトと、resolve
と呼ばれる、ルート(route)をレンダリングして Response
を生成する関数を受け取ります。
これによってレスポンスヘッダーとボディを変更したり、SvelteKit を完全にバイパスすることができます (例えば、プログラムによるルート(routes)実装など)。
ts
interface Handle {…}
ts
(input: {
HandleClientErrorpermalink
クライアントサイドの handleError
hook は、ナビゲーション中に予期せぬエラー(unexpected error)がスローされたときに実行されます。
もし予期せぬエラーが load かその後のレンダリング中にスローされた場合、この関数はその error と error と event を引数に取って呼び出されます。 この関数では決してエラーをスローしないようにしてください。
ts
interface HandleClientError {…}
ts
HandleFetchpermalink
handleFetch
hook によって、サーバーで(またはプリレンダリング中に)実行される load
関数の内側で実行される fetch
リクエストを変更 (または置換) することができます
ts
interface HandleFetch {…}
ts
HandleServerErrorpermalink
サーバーサイドの handleError
hook は、リクエストの応答中に予期せぬエラー(unexpected error)がスローされたときに実行されます。
もし予期せぬエラーが load か レンダリング中にスローされた場合、この関数はその error と event を引数に取って呼び出されます。 この関数では決してエラーをスローしないようにしてください。
ts
interface HandleServerError {…}
ts
HttpErrorpermalink
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
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
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;
レスポンスにヘッダーを設定する必要がある場合、このメソッドを使ってそれを実現することができます。これはページをキャッシュさせる場合に便利です。例えば:
ts
export async functionBinding element 'fetch' implicitly has an 'any' type.Binding element 'setHeaders' implicitly has an 'any' type.7031load ({, fetch }) { setHeaders
7031Binding element 'fetch' implicitly has an 'any' type.Binding element 'setHeaders' implicitly has an 'any' type.consturl = `https://cms.example.com/articles.json`;constresponse = awaitfetch (url );setHeaders ({age :response .headers .get ('age'),'cache-control':response .headers .get ('cache-control')});returnresponse .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
関数が再実行されます。
ts
letcount = 0;export async functionBinding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.load ({}) { depends depends ('increase:count');return {count :count ++ };}
// @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>
Navigationpermalink
ts
interface Navigation {…}
ts
ナビゲーションがトリガーされた場所
ts
ナビゲーションの行き先/行った先
ts
ナビゲーションのタイプ:
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
現在のページのエラーオブジェクト(存在する場合)。handleError
hook から注入される。
ts
現在のページにおいて、全ての 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
現在のリクエストに関する 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
handle hook
内でリクエストに追加されるカスタムの data が含まれる。
ts
params: Params;
現在のルート(route)のパラメータ - 例えば /blog/[slug]
というルート(route)の場合は、{ slug: string }
オブジェクト
ts
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;
レスポンスにヘッダーを設定する必要がある場合、このメソッドを使ってそれを実現することができます。これはページをキャッシュさせる場合に便利です。例えば:
ts
export async functionBinding element 'fetch' implicitly has an 'any' type.Binding element 'setHeaders' implicitly has an 'any' type.7031load ({, fetch }) { setHeaders
7031Binding element 'fetch' implicitly has an 'any' type.Binding element 'setHeaders' implicitly has an 'any' type.consturl = `https://cms.example.com/articles.json`;constresponse = awaitfetch (url );setHeaders ({age :response .headers .get ('age'),'cache-control':response .headers .get ('cache-control')});returnresponse .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
ResolveOptionspermalink
ts
interface ResolveOptions {…}
ts
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
ts
id: string;
ts
api: {};
ts
page: {};
ts
pattern: RegExp;
ts
ts
ts
ts
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[];};
private fields
Serverpermalink
ts
class Server {}
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
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
ts
parent(): Promise<ParentData>;
await parent()
は、親の +layout.server.js
の load
関数から data を返します。
await parent()
を使用する場合、偶発的なウォーターフォールを引き起こさないようにご注意ください。例えば、親の data を戻り値にマージしたいだけであれば、他のデータを取得したあとにこれを呼び出すようにしてください。
ts
depends(...deps: string[]): void;
この関数は、load
関数が1つ以上の URL またはカスタムの識別子に依存していることを宣言します。この依存関係は、あとで invalidate()
で load
を再実行させるのに使用されます。
fetch
はあなたの代わりに depends
を呼び出すので、ほとんどの場合これは必要ありません。必要になるのは、fetch
をバイパスするカスタムの API クライアントを使用している場合のみです。
URL はロードされるページに対して絶対パスか相対パスで、エンコードされている必要があります。
カスタムの識別子は、URI 仕様に準拠するため、1つ以上の小文字で始まり、それに続いてコロンを付ける必要があります。
以下の例では、depends
を使用してカスタムの識別子を依存関係に登録する方法を示しています。これにより、ボタンがクリックされると invalidate
が実行され、load
関数が再実行されます。
ts
letcount = 0;export async functionBinding element 'depends' implicitly has an 'any' type.7031Binding element 'depends' implicitly has an 'any' type.load ({}) { depends depends ('increase:count');return {count :count ++ };}
// @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;| void| ((opts: {form: HTMLFormElement;action: URL;/*** フォーム送信(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
エントリーが作成されると呼び出される関数です。 ここで、関数をファイルシステムに書き込み、リダイレクトマニフェストを生成します。
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
ts
ts
ts
ts
ts
ts
ts
ts
ts
ts
ts
ts
ts
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
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'
PrerenderMappermalink
ts
PrerenderMissingIdHandlerpermalink
ts
interface PrerenderMissingIdHandler {…}
ts
(details: { path: string; id: string; referrers: string[]; message: string }): void;
PrerenderMissingIdHandlerValuepermalink
ts
type PrerenderMissingIdHandlerValue =| 'fail'| 'warn'| 'ignore'
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
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
が渡されることを想定しています:
ts
* foo: string;* bar: string;* baz: string* }>} */export async functionA 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.({ GET params }) {// ...}
ts
export constGET = (async ({params }) => {// ...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
ファイルを生成します:
ts
import type * asKit from '@sveltejs/kit';typeRouteParams = {foo : string;bar : string;baz : string;}export typePageServerLoad =Kit .ServerLoad <RouteParams >;export typePageLoad =Kit .Load <RouteParams >;
TypeScript の設定にある rootDirs
オプションのおかげで、エンドポイントとページではこれらのファイルが同じディレクトリにあるかのようにインポートすることができます:
ts
/** @type {import('./$types').PageServerLoad} */export async functionGET ({params }) {// ...}
ts
import type {PageServerLoad } from './$types';export constGET = (async ({params }) => {// ...}) satisfiesPageServerLoad ;
ts
/** @type {import('./$types').PageLoad} */export async functionload ({params ,fetch }) {// ...}
ts
import type {PageLoad } from './$types';export constload = (async ({params ,fetch }) => {// ...}) satisfiesPageLoad ;
これを動作させるためには、
tsconfig.json
またはjsconfig.json
が生成された.svelte-kit/tsconfig.json
を継承する必要があります (.svelte-kit
の場所はoutDir
です):{ "extends": "./.svelte-kit/tsconfig.json" }
Default tsconfig.jsonpermalink
生成された .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 が正常に動作するために必要なものであり、変更したときに何が起こるのか把握していないのであれば、そのままにしておく必要があります:
{
"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
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 {}