TypeScript設定

// 基本的な型
let name: string = "太郎";
let age: number = 25;
let isActive: boolean = true;

// 配列
let numbers: number[] = [1, 2, 3];
let names: Array<string> = ["太郎", "花子"];

// オブジェクト
let user: { name: string; age: number } = {
  name: "太郎",
  age: 25
};

// 関数
function add(a: number, b: number): number {
  return a + b;
}

// アロー関数
const multiply = (a: number, b: number): number => a * b;

// インターフェース（拡張可能）
interface User {
  id: string;
  name: string;
  email: string;
  age?: number; // オプショナル
}

// 型エイリアス（ユニオン型などに便利）
type Status = "active" | "inactive" | "pending";
type ID = string | number;

// インターフェースの拡張
interface Admin extends User {
  role: "admin";
  permissions: string[];
}

// 交差型
type Employee = User & {
  employeeId: string;
  department: string;
};

// ジェネリック関数
function identity<T>(value: T): T {
  return value;
}

// 使用例
const num = identity<number>(42);
const str = identity<string>("hello");

// ジェネリックインターフェース
interface Box<T> {
  value: T;
  getValue(): T;
  setValue(value: T): void;
}

// ジェネリッククラス
class Container<T> {
  private value: T;
  
  constructor(value: T) {
    this.value = value;
  }
  
  get(): T {
    return this.value;
  }
  
  set(value: T): void {
    this.value = value;
  }
}

// typeof型ガード
function processValue(value: string | number) {
  if (typeof value === "string") {
    return value.toUpperCase(); // string型として扱える
  } else {
    return value * 2; // number型として扱える
  }
}

// instanceof型ガード
class Dog {
  bark() { console.log("ワン！"); }
}

class Cat {
  meow() { console.log("ニャー！"); }
}

function petSound(pet: Dog | Cat) {
  if (pet instanceof Dog) {
    pet.bark();
  } else {
    pet.meow();
  }
}

// カスタム型ガード
function isUser(obj: any): obj is User {
  return obj && typeof obj.name === "string" && typeof obj.email === "string";
}

// JavaScript（型なし）
let count = 0;
function increment(value) {
  return value + 1;  // valueが文字列でもエラーにならない
}

// TypeScript（型あり）
let count: number = 0;
function increment(value: number): number {
  return value + 1;  // 数値以外はコンパイル時にエラー
}

npm create svelte@latest my-app
# 以下のオプションを選択
# - Skeleton project
# - Yes, using TypeScript syntax
# - Add ESLint for code linting? Yes
# - Add Prettier for code formatting? Yes

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

# tsconfig.jsonを作成
npx tsc --init

# .jsファイルを.tsに変更
# .svelteファイルにlang="ts"を追加

// Partial - 全てのプロパティをオプショナルに
interface User {
  id: string;
  name: string;
  email: string;
}

type PartialUser = Partial<User>;
// { id?: string; name?: string; email?: string; }

// Required - 全てのプロパティを必須に
type RequiredUser = Required<PartialUser>;

// Readonly - 全てのプロパティを読み取り専用に
type ReadonlyUser = Readonly<User>;

// Pick - 特定のプロパティのみ抽出
type UserIdAndName = Pick<User, "id" | "name">;

// Omit - 特定のプロパティを除外
type UserWithoutId = Omit<User, "id">;

// Record - キーと値の型を指定
type UserMap = Record<string, User>;

// カスタムマップ型
type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

// 基本的なテンプレートリテラル型
type EventName = "click" | "focus" | "blur";
type EventHandler = `on${Capitalize<EventName>}`;
// "onClick" | "onFocus" | "onBlur"

// 実用例：CSSプロパティ
type Size = "sm" | "md" | "lg";
type Color = "primary" | "secondary" | "danger";
type ButtonClass = `btn-${Size}-${Color}`;
// "btn-sm-primary" | "btn-sm-secondary" | ... 9通り

// パターンマッチング
type ExtractParams<T> = T extends `/api/${infer Endpoint}/${infer Id}`
  ? { endpoint: Endpoint; id: Id }
  : never;

type Result = ExtractParams<"/api/users/123">;
// { endpoint: "users"; id: "123" }

// 基本的な条件型
type IsString<T> = T extends string ? true : false;
type Test1 = IsString<"hello">; // true
type Test2 = IsString<42>; // false

// inferを使った型の抽出
type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;
type Result = ReturnType<() => string>; // string

// 配列要素の型を抽出
type ArrayElement<T> = T extends (infer U)[] ? U : never;
type Item = ArrayElement<string[]>; // string

// Promiseの中身を抽出
type Unwrap<T> = T extends Promise<infer U> ? U : T;
type Data = Unwrap<Promise<string>>; // string

// Component.svelte 内のスクリプト部分
type Props = {
  title: string;
  count?: number;
  onClose?: () => void;
};

let { 
  title, 
  count = 0,
  onClose
}: Props = $props();

type Props = {
  value: $bindable<string>;
  checked?: $bindable<boolean>;
};

let { 
  value = $bindable(''),
  checked = $bindable(false)
}: Props = $props();

// クリックイベント
function handleClick(event: MouseEvent & { 
  currentTarget: HTMLButtonElement 
}) {
  console.log(event.currentTarget.dataset.id);
}

// フォームイベント
function handleSubmit(event: SubmitEvent & {
  currentTarget: HTMLFormElement
}) {
  const formData = new FormData(event.currentTarget);
}

// counter.svelte.ts
export function createCounter(initial = 0) {
  let count = $state(initial);
  
  return {
    get value() { return count; },
    increment() { count++; },
    decrement() { count--; },
    reset() { count = initial; },
    set(value: number) { count = value; }
  };
}

// 型エクスポート
export type Counter = ReturnType<typeof createCounter>;

// store.svelte.ts
export function createStore<T>(initial: T) {
  let value = $state(initial);
  
  return {
    get current() { return value; },
    set(newValue: T) { value = newValue; },
    update(fn: (value: T) => T) { 
      value = fn(value); 
    }
  };
}

// 使用例
const userStore = createStore<User>({
  id: '',
  name: '',
  email: ''
});

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

export const load: PageLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/posts/${params.id}`);
  const post: Post = await response.json();
  
  return {
    post
  };
};

// +page.server.ts
import type { Actions } from './$types';

export const actions: Actions = {
  create: async ({ request }) => {
    const formData = await request.formData();
    const title = formData.get('title');
    
    if (typeof title !== 'string' || !title) {
      return {
        success: false,
        errors: { title: 'タイトルは必須です' }
      };
    }
    
    // 処理...
    return { success: true };
  }
};

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

export const GET: RequestHandler = async ({ params, url }) => {
  const page = Number(url.searchParams.get('page') ?? 1);
  const data = await fetchData(page);
  
  return new Response(JSON.stringify(data), {
    headers: {
      'Content-Type': 'application/json'
    }
  });
};

export const POST: RequestHandler = async ({ request }) => {
  const body = await request.json();
  
  // バリデーション
  if (!isValidData(body)) {
    return new Response('Bad Request', { status: 400 });
  }
  
  // 処理...
  return new Response('Created', { status: 201 });
};

// 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 {};

// lib/types.ts

// APIレスポンス型
export type ApiResponse<T> = 
  | { success: true; data: T }
  | { success: false; error: string };

// フォームエラー型
export type FormErrors<T> = {
  [K in keyof T]?: string;
};

// Nullable型
export type Nullable<T> = T | null | undefined;

// DeepPartial型
export type DeepPartial<T> = {
  [P in keyof T]?: T[P] extends object 
    ? DeepPartial<T[P]> 
    : T[P];
};

// Button.svelte
<script lang="ts">
  export type ButtonProps = {
    variant?: 'primary' | 'secondary' | 'danger';
    size?: 'sm' | 'md' | 'lg';
    disabled?: boolean;
    onClick?: (event: MouseEvent) => void;
  };

  let { 
    variant = 'primary',
    size = 'md',
    disabled = false,
    onClick
  }: ButtonProps = $props();
</script>

// 他のファイルで使用
import type { ButtonProps } from './Button.svelte';

const buttonConfig: ButtonProps = {
  variant: 'primary',
  size: 'lg'
};

type Props = {
  mode: 'view';
  data: string;
} | {
  mode: 'edit';
  data: string;
  onChange: (value: string) => void;
};

let props: Props = $props();

// TypeScriptが自動的に型を絞り込む
if (props.mode === 'edit') {
  props.onChange('new value'); // OK
}

// List.svelte
<script lang="ts" generics="T">
  type Props<T> = {
    items: T[];
    renderItem: (item: T) => string;
    onSelect?: (item: T) => void;
  };

  let { items, renderItem, onSelect }: Props<T> = $props();
</script>

{#each items as item}
  <div on:click={() => onSelect?.(item)}>
    {renderItem(item)}
  </div>
{/each}

// ❌ エラー
let props = $props();

// ✅ 正しい
type Props = { /* ... */ };
let props: Props = $props();

// ❌ 型が any[] になる
let items = $state([]);

// ✅ 正しい型定義
let items = $state<Item[]>([]);

// ❌ event の型が any
function handleInput(event) {
  console.log(event.target.value);
}

// ✅ 正しい型定義
function handleInput(event: Event & {
  currentTarget: HTMLInputElement
}) {
  console.log(event.currentTarget.value);
}

// ❌ Promise<any>になる
async function fetchData() {
  const response = await fetch('/api/data');
  return response.json();
}

// ✅ 正しい型定義
async function fetchData(): Promise<Data[]> {
  const response = await fetch('/api/data');
  return response.json() as Promise<Data[]>;
}

// ❌ detailの型が不明
function dispatch(name, detail) {
  // ...
}

// ✅ 型安全なイベントディスパッチ
import { createEventDispatcher } from 'svelte';

type Events = {
  save: { id: string; data: FormData };
  cancel: null;
  change: string;
};

const dispatch = createEventDispatcher<Events>();

// 使用時に型チェックが効く
dispatch('save', { id: '123', data: formData }); // OK
dispatch('save', { id: 123 }); // エラー: idはstring型である必要がある

// tsconfig.json
// compilerOptionsの設定例
// incremental: true - インクリメンタルビルド有効化
// tsBuildInfoFile: ".tsbuildinfo" - ビルド情報ファイル
// skipLibCheck: true - 型定義ファイルのチェックをスキップ
// skipDefaultLibCheck: true - デフォルトライブラリのチェックをスキップ

# package.jsonのscripts設定例
npm run check       # svelte-kit sync && svelte-check --tsconfig ./tsconfig.json
npm run check:watch # 監視モード
npm run build       # 型チェック後にビルド

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

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

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

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

# よく使う型定義
npm install -D @types/node
npm install -D @types/cookie
npm install -D @types/markdown-it

<!-- UserCard.svelte -->
<script lang="ts">
  import type { ComponentEvents } from 'svelte';
  
  // ユーザーの型定義
  interface User {
    id: string;
    name: string;
    email: string;
    avatar?: string;
    role: 'admin' | 'user' | 'guest';
    createdAt: Date;
  }
  
  // コンポーネントのProps
  type Props = {
    user: User;
    showDetails?: boolean;
    editable?: boolean;
    onEdit?: (user: User) => void;
    onDelete?: (id: string) => Promise<void>;
  };
  
  let { 
    user,
    showDetails = false,
    editable = false,
    onEdit,
    onDelete
  }: Props = $props();
  
  // 内部状態
  let isDeleting = $state(false);
  let error = $state<string | null>(null);
  
  // 派生値
  let roleLabel = $derived(() => {
    const labels: Record<User['role'], string> = {
      admin: '管理者',
      user: 'ユーザー',
      guest: 'ゲスト'
    };
    return labels[user.role];
  });
  
  // 非同期ハンドラ
  async function handleDelete() {
    if (!onDelete) return;
    
    isDeleting = true;
    error = null;
    
    try {
      await onDelete(user.id);
    } catch (err) {
      error = err instanceof Error ? err.message : '削除に失敗しました';
    } finally {
      isDeleting = false;
    }
  }
  
  // イベントハンドラ
  function handleEdit(event: MouseEvent) {
    event.preventDefault();
    onEdit?.(user);
  }
</script>

<div class="user-card">
  <img src={user.avatar ?? '/default-avatar.png'} alt={user.name} />
  <h3>{user.name}</h3>
  <span class="role">{roleLabel()}</span>
  
  {#if showDetails}
    <p>{user.email}</p>
    <time>{user.createdAt.toLocaleDateString()}</time>
  {/if}
  
  {#if editable}
    <button onclick={handleEdit}>編集</button>
    <button 
      onclick={handleDelete} 
      disabled={isDeleting}
    >
      {isDeleting ? '削除中...' : '削除'}
    </button>
  {/if}
  
  {#if error}
    <p class="error">{error}</p>
  {/if}
</div>

<!-- ContactForm.svelte -->
<script lang="ts">
  import { z } from 'zod';
  
  // Zodスキーマで入力値を検証
  const contactSchema = z.object({
    name: z.string().min(1, '名前は必須です'),
    email: z.string().email('有効なメールアドレスを入力してください'),
    subject: z.string().min(1, '件名は必須です'),
    message: z.string().min(10, 'メッセージは10文字以上必要です')
  });
  
  // フォームデータの型
  type ContactData = z.infer<typeof contactSchema>;
  
  // フォームエラーの型
  type FormErrors = Partial<Record<keyof ContactData, string>>;
  
  // Props
  type Props = {
    onSubmit: (data: ContactData) => Promise<void>;
  };
  
  let { onSubmit }: Props = $props();
  
  // フォームの状態
  let formData = $state<ContactData>({
    name: '',
    email: '',
    subject: '',
    message: ''
  });
  
  let errors = $state<FormErrors>({});
  let isSubmitting = $state(false);
  
  // バリデーション
  function validate(): boolean {
    try {
      contactSchema.parse(formData);
      errors = {};
      return true;
    } catch (err) {
      if (err instanceof z.ZodError) {
        errors = err.errors.reduce((acc, curr) => {
          const key = curr.path[0] as keyof ContactData;
          acc[key] = curr.message;
          return acc;
        }, {} as FormErrors);
      }
      return false;
    }
  }
  
  // 送信処理
  async function handleSubmit(event: SubmitEvent) {
    event.preventDefault();
    
    if (!validate()) return;
    
    isSubmitting = true;
    try {
      await onSubmit(formData);
      // 成功時はフォームをリセット
      formData = { name: '', email: '', subject: '', message: '' };
    } catch (err) {
      console.error('送信エラー:', err);
    } finally {
      isSubmitting = false;
    }
  }
</script>

<form onsubmit={handleSubmit}>
  <label>
    名前
    <input 
      bind:value={formData.name}
      class:error={errors.name}
    />
    {#if errors.name}
      <span class="error-message">{errors.name}</span>
    {/if}
  </label>
  
  <!-- 他のフィールドも同様に実装 -->
  
  <button type="submit" disabled={isSubmitting}>
    {isSubmitting ? '送信中...' : '送信'}
  </button>
</form>