Svelte入門：リファレンス Types -Vol.8-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説して います。

スポンサーリンク

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

Types

PageData

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

interface PageData {}

解説

この部分は Svelte のタイプシステムに関する説明です。具体的には：

1. PageData インターフェース：このインターフェースは、Svelte アプリケーション内の全ページで共有されるデータの形状（型）を定義します。
2. page.data と $page.data：
   • page.data は状態オブジェクト
   • $page.data はストア（リアクティブな値）
   • どちらも同じデータ形状を持ちます
3. Load と ServerLoad 関数：./$types ファイル内のこれらの関数は、PageData インターフェースに基づいて型が自動的に絞り込まれます。つまり、このインターフェースで定義した型に合わせてデータをロードする必要があります。
4. オプションのプロパティ：特定のページでのみ必要なデータは、オプションのプロパティ（例：title?: string）として定義することが推奨されています。
5. インデックスシグネチャの禁止：[key: string]: any のような任意のプロパティを許可する記述は避けるべきとされています。これは型安全性を高めるためです。

このインターフェースを適切に定義することで、Svelteアプリケーション全体でのデータの一貫性と型安全性が向上します。

おわりに 

今日は、 SvelteKitのリファレンスについて解説しました。

よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)