TypeScript

TypeScriptの型パズルを解く：実践的なGenerics活用術

TypeScriptのGenericsを使った実践的なパターンを紹介。型安全なAPIクライアントの作り方から、条件型・マップ型の活用まで解説します。

2026年3月22日·Akira

TypeScriptのGenericsは最初は難しく感じますが、パターンを覚えると強力な型安全性を実現できます。

基本的なGenerics

// 型安全なAPIレスポンスラッパー
type ApiResponse<T> = {
  data: T;
  status: number;
  message: string;
};

async function fetchData<T>(url: string): Promise<ApiResponse<T>> {
  const res = await fetch(url);
  return res.json();
}

// 使用例
const result = await fetchData<{ name: string }[]>("/api/users");
// result.data は { name: string }[] 型として推論される

Akira

フロントエンドエンジニア。Next.jsとTypeScriptが好き。

記事一覧に戻る