はじめに
SvelteKitでページのレンダリング前にDBなどからデータを取得する際には、
ページと同じ階層に +page(.server).ts ファイルを作成します。
このファイルは、データ取得処理を行う load 関数をモジュールとして export するのですが、TypeScript を使用する場合、この関数の戻り値の型を定義するために satisfies PageLoad(PageServerLoad) を使用します。
この satisfies ってなに？どういう動きをするのか？という点を解説したいと思います。
公式ドキュメントのSampleの確認
公式ドキュメントによるデータ取得時のSampleを見てみましょう。
公式ドキュメントには次のように記載があります。
load 関数は、DBからデータを取得し、{ post: data }というオブジェクトを返す動きになっています。
import * as db from '$lib/server/database';
import type { PageServerLoad } from './$types';
export const load = (async ({ params }) => {
return {
post: await db.getPost(params.slug)
};
}) satisfies PageServerLoad;
画面側では、load関数で取得した結果を元にデータを取得しています。
このコードから、dbから「title」と「content」の二つの項目を取得する想定であることがわかりますね。
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
</script>
<h1>{data.post.title}</h1>
<div>{@html data.post.content}</div>
satisfies とは
satisfies は TypeScript 4.9 にて新しく追加された演算子です。
次のような複数のkeyがあり、それぞれのvalueの型が異なるオブジェクトに指定した型にマッチするかどうかをチェック(型推論)することができます。
これによって、MyBook.title が string として推論されるため、後続の処理において文字列型として扱うことができます。
type Book = {
title: string;
page: number;
};
const MyBook = {
title: 'book',
page: 100,
} satisfies Book;
詳細は公式ドキュメントを確認するか、
次の記事が理解しやすかったためおすすめです。
SvelteKitにおけるsatisfies
satisfies の動きを理解したところで、SvelteKitでは satisfies をどう利用しているのかについて見ていきたいと思います。
データ取得処理を行う load 関数の戻り値の型は PageLoad(PageServerLoad) と定義されています。
この PageLoad(PageServerLoad) は、自分で定義するのではなくビルドを行うことでSvelteKitが自動的に型定義を作成してくれます。
（※手元で.svelte-kitディレクトリを削除した後、ビルドを行うとフォルダが再度作成されることを確認できます）
コード上では、import type { PageServerLoad } from './$types'; とインポートを行いますが、実際に型を定義している箇所は .svelte-kit/types/src/routes/$types.d.tsになります。
（※$types.d.tsファイルはsrc/routes配下に各アプリの階層に合わせたページごとに作成されます）
どのように型定義しているかは、少し読みにくいのですが、load 関数の返り値の型や他の情報を元に型を定義しているように読み取れます。
export type PageServerData = Expand<OptionalUnion<EnsureDefined<Kit.AwaitedProperties<Awaited<ReturnType<typeof import('../../../../src/routes/+page.server.js').load>>>>>>;
また、画面側では先ほど定義したload関数の返り値（サーバから取得した値）は data 変数に格納します。
この data 変数の型は PageData 型になるのですが、これも先ほどの .svelte-kit/types/src/routes/$types.d.ts ファイルにて定義されています。
どのように定義されているかを見ると、先ほど定義されていたPageServerData型を元に定義されているみたいですね。
これによって、ユーザはビルドを行うことによってサーバから取得した値の型をあまり気にせずに、画面の実装時に型推論の恩恵を受けれるということですね！
(↓data.post.titleの値がstringであるという型推論の恩恵を受けている図）
まとめ
最初は satisfies ってなんだという動機から調べ始めましたが、最終的に SvelteKit の型定義の仕方ってどうやっているのという話に着地してしまいました。
しかし、なんとなく受けていた恩恵がどういう風な仕組みで型推論されているかということを知れて一歩理解が深まった気がして良かったです。
ユーザは return の型をどう返すかしっかり書いてビルドすれば、自動的に画面側で型推論できるなんて、SvelteKit便利！
余談：今回の調査で躓いた点
モジュール '$lib/server/database' またはそれに対応する型宣言が見つかりません。
Svelte の CLI を使用してプロジェクトを作成し、+page.server.ts ファイルを作成した際に上記のエラーメッセージが表示されました。
SvelteKit は src/lib フォルダ配下にあるモジュールを $lib エイリアスを使うことで呼び出し側の import 文においてパスを「../../../」のように書かなくて済みます。
これが発生した原因は、CLI でプロジェクトを作成した際に Skelton project temlate を使って作成したためでした。
Skelton projectで作成した場合、.svelte-kit/tsconfig.json ファイルのエイリアスの設定が不足しているためこのエラーメッセージが表示されていました。
これを修正するにはプロジェクトのフォルダ構成に変更を加えて再度ビルド（npm run build）する必要があります。
具体的には src/lib フォルダを追加しビルドをすることで .svelte-kit/tsconfig.json ファイルに $lib エイリアスが追加され、コード上でエラーが表示されなくなります。
.svelte-kit/tsconfig.json のデフォルト設定については公式ドキュメントを参照してください。
{
"compilerOptions": {
// before(init) -------------------------
"paths": {},
// after(add lib folder) ----------------
"paths": {
"$lib": [
"../src/lib"
],
"$lib/*": [
"../src/lib/*"
]
},
//...以下省略
}