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

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

背景

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

Types

デフォルトのtsconfig.json

生成される.svelte-kit/tsconfig.jsonファイルには様々なオプションが含まれています。一部はプロジェクト設定に基づきプログラム的に生成されるもので、正当な理由がなければ上書きすべきではありません：

.svelte-kit/tsconfig

{
	"compilerOptions": {
		"paths": {
			"$lib": ["../src/lib"],
			"$lib/*": ["../src/lib/*"]
		},
		"rootDirs": ["..", "./types"]
	},
	"include": [
		"ambient.d.ts",
		"non-ambient.d.ts",
		"./types/**/$types.d.ts",
		"../vite.config.js",
		"../vite.config.ts",
		"../src/**/*.js",
		"../src/**/*.ts",
		"../src/**/*.svelte",
		"../tests/**/*.js",
		"../tests/**/*.ts",
		"../tests/**/*.svelte"
	],
	"exclude": [
		"../node_modules/**",
		"../src/service-worker.js",
		"../src/service-worker/**/*.js",
		"../src/service-worker.ts",
		"../src/service-worker/**/*.ts",
		"../src/service-worker.d.ts",
		"../src/service-worker/**/*.d.ts"
	]
}

その他のオプションはSvelteKitが正しく動作するために必要なもので、何をしているか理解していない限り変更すべきではありません：

.svelte-kit/tsconfig

{
	"compilerOptions": {
		// これは型が明示的に`import type`で
		// インポートされることを保証します
		// これはSvelte/Viteがコンポーネントを
		// 正しくコンパイルするために必要です
		"verbatimModuleSyntax": true,

		// Viteはモジュールグラフ全体ではなく
		// 一度に1つのTypeScriptモジュールを
		// コンパイルします
		"isolatedModules": true,

		// TSに型チェックのみに使用されることを伝えます
		"noEmit": true,

		// これは`vite build`と`svelte-package`の
		// 両方が正しく動作することを保証します
		"lib": ["esnext", "DOM", "DOM.Iterable"],
		"moduleResolution": "bundler",
		"module": "esnext",
		"target": "esnext"
	}
}

解説

このセクションでは、SvelteKitが生成するTypeScript設定ファイル（.svelte-kit/tsconfig.json）について説明しています。このファイルは2つの主要部分に分かれています：

1. プロジェクト固有の設定

最初のブロックには、プロジェクト構成に基づいて生成される設定が含まれています：

• paths: $libエイリアスをSvelteKitの標準的なライブラリディレクトリ（src/lib）にマッピングします
• rootDirs: プロジェクトのルートと型定義ディレクトリを指定します。これにより./$typesから型をインポートできます
• include: TypeScriptがチェックすべきファイルパターンを指定します（ソースコード、テスト、設定ファイルなど）
• exclude: TypeScriptチェックから除外すべきファイルパターンを指定します（node_modules、サービスワーカーなど）

これらの設定は、あなたのプロジェクト構造に基づいて自動生成されるため、正当な理由がない限り変更すべきではありません。

2. SvelteKit必須の設定

2番目のブロックには、SvelteKitが正しく動作するために必要な設定が含まれています：

• verbatimModuleSyntax: 型インポートにimport type構文を強制します。これはSvelteとViteが正しくコンポーネントをコンパイルするために必要です
• isolatedModules: Viteの単一モジュールコンパイル方式と互換性を持たせるための設定です
• noEmit: TypeScriptが型チェックのみを行い、JavaScript出力を生成しないことを指示します
• lib, moduleResolution, module, target: 最新のECMAScript機能をサポートし、Viteビルドとsvelte-packageの両方での互換性を確保するための設定です

これらの設定は、SvelteKitの内部動作に密接に関連しているため、何をしているか完全に理解していない限り変更すべきではありません。

実際の使用方法

プロジェクトのルートにあるtsconfig.jsonから、この生成されたファイルをextendsで拡張するのが推奨されています：

{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    // 追加のプロジェクト固有の設定をここに記述
  }
}

これにより、SvelteKitの必須設定を維持しながら、プロジェクト固有の追加設定を行うことができます。

おわりに 

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