Svelte入門：リファレンス @sveltejs/kit -Vol.7-

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

背景

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

@sveltejs/kit

LessThan

LessThanは、与えられた数値TNumber未満の数値を生成する型です。

型パラメータ：

• TNumber: 数値型で、上限値を指定
• TArray: 任意の型の配列（デフォルトは空配列）

型の条件分岐：

• TNumberがTArrayの長さと等しい場合：TArray[number]（配列の要素型）を返す
• それ以外の場合：配列に新しい要素を追加して再帰的に処理

解説

これはTypeScriptの高度な型システムを使用した、数値の範囲を表現するための型定義です。

1. 動作原理：

• 再帰的な型定義を使用
• 配列の長さを利用して数値を表現
• ユニオン型として結果を生成

1. 具体例：

type Example = LessThan<3>;
// 結果は: 0 | 1 | 2

処理の流れ：

1. 最初：[] (長さ0)
2. 1回目：[0] (長さ1)
3. 2回目：[0, 1] (長さ2)
4. 3回目：[0, 1, 2] (長さ3)
5. 完了：配列のインデックス型として0 | 1 | 2を返す
6. 使用シーン：

• 有限な数値範囲の型安全な表現
• コンパイル時の数値制約
• タプルや配列の要素数制限

この型定義は、コンパイル時に数値の範囲を強制するための高度な型システムの活用例です。

Load

PageLoadとLayoutLoadの汎用的な形式です。Loadを直接使用するのではなく、（生成された型から）./$typesからそれらをインポートする必要があります。

型パラメータ：

1. Params: 文字列キーと文字列値を持つ部分的なレコード
2. InputData: 不明な型の値を持つレコードまたはnull
3. ParentData: 不明な型の値を持つレコード
4. OutputData: 不明な型の値を持つレコードまたはvoid
5. RouteId: 文字列またはnull

関数シグネチャ：

• 引数：LoadEvent<Params, InputData, ParentData, RouteId>型のイベント
• 戻り値：OutputData型の値またはPromise

解説

これはSvelteKitのデータローディングシステムの中核となる型定義です。

1. 型パラメータの詳細：

• Params: URLパラメータを表現（例：/blog/[slug]のslug）
• InputData: 入力データ（他のloadersからのデータなど）
• ParentData: 親コンポーネントからのデータ
• OutputData: このローダーが返すデータ
• RouteId: ルートの識別子

1. 実装上の特徴：

• 非同期処理に対応（MaybePromise型）
• 柔軟なデータ型を許容
• 型安全性を確保しながら汎用性を維持

1. 使用パターン：

// 生成された型を使用する推奨方法
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params }) => {
  // データ取得ロジック
  return {
    // 型安全なデータ
  };
};

4. 重要な注意点：

• 直接的なLoad型の使用は避ける
• 生成された具体的な型を使用する
• 型パラメータは必要に応じてカスタマイズ可能

この型定義は、SvelteKitのデータローディングシステムに型安全性を提供する重要な要素です。

LoadProperties

条件付き型定義：

• 入力型inputがvoidの場合：undefinedを返す（voidはインテリセンスを壊すため、undefinedが必要）
• 入力型inputがRecord<string, any>（キーが文字列、値が任意の型のオブジェクト）の場合：入力型をそのまま返す
• それ以外の場合：unknown型を返す

型パラメータ：

• input: Record<string, any>型またはvoid型を受け入れる

解説

これはSvelteKitの型システムにおいて、ロード関数のプロパティを適切に型付けするためのユーティリティ型です。

1. 型の分岐ロジック：

// ケース1: void型の場合
type Case1 = LoadProperties<void>;  // undefined

// ケース2: レコード型の場合
type Case2 = LoadProperties<{ title: string }>;  // { title: string }

// ケース3: その他の場合
type Case3 = LoadProperties<number>;  // unknown

2. 特徴的な点：

• voidをundefinedに変換する理由は、IDEのインテリセンスのサポートを維持するため
• 型安全性を保ちながら柔軟な入力を許容
• 明確な型階層を提供

2. 主な使用場面：

• ロード関数の戻り値の型定義
• コンポーネントのプロパティ型の定義
• データフローの型安全性の確保

この型定義は、特にIDEのサポートと型安全性を両立させるための工夫が施されています。

おわりに

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