開発Tips（2025-12-05）

TypeScript

型安全なコードを維持しながら、柔軟な型定義を実現するために、TypeScriptのUtility Typesを活用しましょう。既存の型を元に新しい型を生成することで、コードの再利用性と可読性を高めます。

Utility TypesでAPIレスポンスの型定義を効率化する

TypeScriptのUtility Typesを活用することで、APIレスポンスの型定義をより効率的に、かつ型安全に行うことができます。特にPick、Omit、Partial、Readonlyなどを組み合わせることで、既存の型から必要なプロパティだけを抽出したり、特定のプロパティを除外したり、必須プロパティを任意にしたり、読み取り専用にしたりといった操作が容易になります。

例えば、APIから取得するユーザー情報の型Userがあったとして、その一部のプロパティだけを表示するコンポーネントがあるとします。

interface User {
  id: number;
  name: string;
  email: string;
  phone: string;
  address: string;
}

// User型からidとnameだけを抽出した型
type UserSummary = Pick<User, 'id' | 'name'>;

function displayUserSummary(user: UserSummary) {
  console.log(`ID: ${user.id}, Name: ${user.name}`);
}

説明:

上記の例では、Pick<User, 'id' | 'name'>を使って、User型からidとnameプロパティだけを抽出したUserSummary型を定義しています。これにより、コンポーネント内でemailやphoneといった不要なプロパティに誤ってアクセスすることを防ぎ、型安全性を向上させることができます。

注意点:

• Utility TypesはTypeScriptのコンパイル時に処理されるため、実行時のパフォーマンスに影響はありません。
• Pick、OmitなどのUtility Typesは、元の型を変更するわけではありません。新しい型を生成する点に注意してください。
• 複雑な型定義になる場合は、型エイリアス（type MyType = ...）を活用して可読性を高めることをおすすめします。

おすすめポイント:

Utility Typesを積極的に活用することで、コードの重複を減らし、型定義の保守性を高めることができます。APIレスポンスだけでなく、フォームの入力値の型定義や、Reduxなどの状態管理ライブラリでの型定義など、様々な場面で役立ちます。