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

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

背景

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

Types

Generated types

RequestHandlerとLoadの型はどちらもParams引数を受け取り、paramsオブジェクトの型を定義できます：

src/routes/[foo]/[bar]/[baz]/+server

import type { RequestHandler } from '@sveltejs/kit';
export const GET: RequestHandler<{
	foo: string;
	bar: string;
	baz: string
}> = async ({ params }) => {
	// ...
};

これは記述が面倒で、移植性も低いです（[foo]ディレクトリを[qux]に変更すると、型が実際の構造と一致しなくなります）。

この問題を解決するために、SvelteKitは各エンドポイントとページに.d.tsファイルを自動生成します：

.svelte-kit/types/src/routes/[foo]/[bar]/[baz]/$types.d

import type * as Kit from '@sveltejs/kit';

type RouteParams = {
	foo: string;
	bar: string;
	baz: string;
};

export type RequestHandler = Kit.RequestHandler<RouteParams>;
export type PageLoad = Kit.Load<RouteParams>;

TypeScriptのrootDirs設定により、これらのファイルは相対パスでインポートできます：

src/routes/[foo]/[bar]/[baz]/+server

import type { RequestHandler } from './$types';

export const GET: RequestHandler = async ({ params }) => {
	// ...
};

src/routes/[foo]/[bar]/[baz]/+page

import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params, fetch }) => {
	// ...
};

loadファンクションの戻り値の型は$typesモジュールからPageDataおよびLayoutDataとして利用でき、すべてのActionsの戻り値の合併型はActionDataとして利用できます。

バージョン2.16.0以降（現在の方法）

バージョン2.16.0からは、追加のヘルパー型が提供されています：

• PageProps: data: PageDataとform: ActionData（アクションがある場合）を定義
• LayoutProps: data: LayoutDataとchildren: Snippetを定義

src/routes/+page

<script lang="ts">
	import type { PageProps } from './$types';

	let { data, form }: PageProps = $props();
</script>

レガシーモード（バージョン2.16.0以前）

バージョン2.16.0以前（$props()使用時）

<script lang="ts">
	import type { PageData, ActionData } from './$types';

	let { data, form }: { data: PageData, form: ActionData } = $props();
</script>

Svelte 4での使用法

<script lang="ts">
	import type { PageData, ActionData } from './$types';
  
	export let data: PageData;
	export let form: ActionData;
</script>

これらの型システムを機能させるには、自分のtsconfig.jsonまたはjsconfig.jsonが生成された.svelte-kit/tsconfig.jsonを拡張している必要があります：

{ "extends": "./.svelte-kit/tsconfig.json" }

解説

SvelteKitの型システムは、開発者体験を向上させるために以下の特徴を提供しています：

1. 自動型生成：ルート構造に基づいてパラメータ型を自動生成することで、手動での型定義が不要に
2. 型の一貫性：バックエンド（load関数やactions）とフロントエンド（コンポーネント）間での型の一貫性を確保
3. リファクタリングの容易さ：ディレクトリ名を変更しても型定義が自動的に更新されるため、メンテナンスが容易
4. コード補完：エディタでのコード補完やエラーチェックがより正確に
5. 進化するAPI：バージョン2.16.0以降では、PagePropsやLayoutPropsなどの新しいヘルパー型が追加され、より簡潔な記述が可能に

この型システムにより、TypeScriptを活用したSvelteKit開発がより安全かつ効率的になります。

おわりに 

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