TypeScript設定

# npm
npx sv create my-app

# pnpm（高速・推奨）
pnpm dlx sv create my-app
# または
pnpx sv create my-app

# yarn
yarn dlx sv create my-app

# bun
bunx sv create my-app

# deno
deno run npm:sv create my-app

┌ Welcome to SvelteKit!
│
◇ Which template would you like?
│ ● SvelteKit minimal （最小構成）
│ ○ SvelteKit demo app （デモアプリ）
│ ○ Library project （ライブラリプロジェクト）
│
◇ Add type checking with TypeScript?
│ ● Yes, using TypeScript syntax （TypeScript構文を使用）
│
◇ Select additional options (スペースで選択、複数可）
│ ◻ Add ESLint for code linting （コードの品質チェック）
│ ◻ Add Prettier for code formatting （コードフォーマット）
│ ◻ Add Playwright for browser testing （E2Eテスト）
│ ◻ Add Vitest for unit testing （ユニットテスト）
│ ◻ Try Svelte 5 beta （Svelte 5ベータ版）
│
└ Your project is ready!

# pnpm（推奨 - 高速で効率的）
cd my-app
pnpm install
pnpm dev

# npm（標準）
cd my-app
npm install
npm run dev

# yarn
cd my-app
yarn
yarn dev

# bun（最新・実験的）
cd my-app
bun install
bun dev

my-app/
├── src/
│   ├── routes/          # ページとレイアウト
│   │   └── +page.svelte # ホームページ
│   ├── lib/             # 共有コンポーネント・ユーティリティ
│   │   └── index.ts     # $lib エクスポート
│   ├── app.d.ts         # グローバル型定義
│   └── app.html         # HTMLテンプレート
├── static/              # 静的ファイル（画像、フォントなど）
├── tests/               # テストファイル（オプション）
├── .svelte-kit/         # 自動生成される型定義（Git無視）
├── svelte.config.js     # Svelte/SvelteKit設定
├── tsconfig.json        # TypeScript設定
├── vite.config.ts       # Vite設定
└── package.json         # 依存関係とスクリプト

# 必要なパッケージをインストール
pnpm add -D typescript tslib @tsconfig/svelte svelte-check

# tsconfig.jsonを作成（SvelteKit用に最適化）
cat > tsconfig.json << 'EOF'
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true
  }
}
EOF

# 型定義の生成
pnpm exec svelte-kit sync

# 段階的な移行
# 1. .jsファイルを.tsに変更
# 2. .svelteファイルに lang="ts" を追加
# 3. 型エラーを修正

// tsconfig.json
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    // 厳密な型チェック
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "alwaysStrict": true,
    
    // 追加の型チェック
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    
    // モジュール解決
    "moduleResolution": "bundler",
    "target": "ESNext",
    "module": "ESNext",
    
    // パスエイリアス
    "paths": {
      "$lib": ["./src/lib"],
      "$lib/*": ["./src/lib/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.svelte"]
}

// 段階1: 最小限の設定から始める
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": false,
    "strict": false
  }
}

// 段階2: 基本的な型チェックを有効化
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "strict": false,
    "noImplicitAny": true
  }
}

// 段階3: 完全な厳密モード
{
  "extends": "./.svelte-kit/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  }
}

// src/app.d.ts
declare global {
  namespace App {
    // エラー型
    interface Error {
      message: string;
      code?: string;
    }
    
    // ローカル変数（サーバーサイドで使用）
    interface Locals {
      user?: {
        id: string;
        name: string;
        role: 'admin' | 'user';
      };
    }
    
    // ページデータ
    interface PageData {
      flash?: {
        type: 'success' | 'error';
        message: string;
      };
    }
    
    // ページ状態
    interface PageState {
      selected?: string;
    }
    
    // プラットフォーム固有の設定
    interface Platform {}
  }
}

export {};

// src/app.d.ts
declare global {
  // カスタム型定義
  interface User {
    id: string;
    name: string;
    email: string;
    createdAt: Date;
  }
  
  interface Post {
    id: string;
    title: string;
    content: string;
    authorId: string;
    publishedAt?: Date;
  }
  
  // 環境変数の型定義
  namespace NodeJS {
    interface ProcessEnv {
      DATABASE_URL: string;
      API_KEY: string;
      NODE_ENV: 'development' | 'production' | 'test';
    }
  }
}

export {};

// .vscode/settings.json
{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "svelte.enable-ts-plugin": true,
  "[svelte]": {
    "editor.defaultFormatter": "svelte.svelte-vscode"
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "typescript.preferences.quoteStyle": "single",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

// .vscode/extensions.json
{
  "recommendations": [
    "svelte.svelte-vscode",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss"
  ]
}

// tsconfig.json の追加設定
{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo",
    "skipLibCheck": true,
    "skipDefaultLibCheck": true
  }
}

// package.json
{
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
    "lint": "eslint .",
    "format": "prettier --write .",
    "test": "vitest",
    "test:unit": "vitest run",
    "prepare": "svelte-kit sync"
  }
}

# 型定義を再生成
npm run svelte-kit sync

# または
pnpm exec svelte-kit sync

# TypeScriptバージョンの確認
npx tsc --version

# VS CodeでワークスペースのTypeScriptを使用
# Cmd/Ctrl + Shift + P → "TypeScript: Select TypeScript Version"
# "Use Workspace Version"を選択

// tsconfig.jsonの確認
// "extends": "./.svelte-kit/tsconfig.json" が必須
// この設定により、SvelteKitの型定義が読み込まれる

# 最新版にアップデート
pnpm update svelte@latest
pnpm update svelte-check@latest

// VS Codeでホバーして型を確認
let value = $state(0);  // ホバーで型を表示

// 明示的な型チェック
type Check = typeof value;  // number