TypeScriptベストプラクティス2024

TypeScriptを使用することで、バグを減らし、開発効率を向上させることができます。

型定義の基本

インターフェースの活用

interface User {
  id: string;
  name: string;
  email: string;
  createdAt: Date;
}

interface Article {
  id: string;
  title: string;
  content: string;
  author: User;
  tags: string[];
}

Svelteコンポーネントでの型定義

Props の型定義

// Component.svelte
<script lang="ts">
  interface Props {
    title: string;
    count?: number;
    onUpdate?: (value: number) => void;
  }
  
  let { title, count = 0, onUpdate }: Props = $props();
</script>

ジェネリクスの活用

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

エラーハンドリング

type Result<T, E = Error> = 
  | { success: true; data: T }
  | { success: false; error: E };

async function fetchData<T>(url: string): Promise<Result<T>> {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return { success: true, data };
  } catch (error) {
    return { success: false, error: error as Error };
  }
}

まとめ

TypeScriptを適切に使用することで、大規模なアプリケーションでも保守性の高いコードを書くことができます。