TypeScriptの深淵：`infer`を駆使した戻り値抽出による「型安全の自動化」
多くのエンジニアが「型定義の二重管理」という泥沼にはまっている。APIレスポンスの型を定義し、それを利用する関数の戻り値を定義し、変更のたびに双方を修正する――これはTypeScriptを使っていながら、手動の型付けという前時代的な負債を抱えているのと同じだ。
今回は、TypeScriptのコンパイラが型を評価する際の「条件付き型（Conditional Types）」と「`infer`キーワード」を組み合わせ、関数の戻り値をソースコードの唯一の真実（Single Source of Truth）とする究極の設計パターンを伝授する。
—
1. なぜ「手動の型定義」は悪なのか
例えば、外部ライブラリやバックエンドから提供されるAPIクライアント関数があるとする。
// 変更のたびにここを修正しなければならない
interface UserResponse {
id: string;
name: string;
roles: string[];
}
async function fetchUser(id: string): Promise
// …実装
}
このコードの問題点は、`fetchUser`の戻り値と`UserResponse`が物理的に分離していることだ。`fetchUser`の実装が変更されたとき、型定義を更新し忘れた瞬間にランタイムと型定義の乖離（型安全性への裏切り）が生まれる。
2. `infer`による「戻り値抽出」の魔法
コンパイラに対し、「この関数が何を返すか、お前が推論して型として抽出してくれ」と指示を出すのが`infer`の役割だ。
以下のユーティリティ型を見てほしい。
/
- 関数型から戻り値の型を抽出するユーティリティ
- T が関数型であれば、その戻り値の型 (R) を抽出する
/
type ReturnTypeFrom
// 使用例
async function fetchUser(id: string) {
return { id: ‘1’, name: ‘Alice’, roles: [‘admin’] };
}
// fetchUserの戻り値型を自動的に推論
type User = ReturnTypeFrom
// Userの型は { id: string; name: string; roles: string[] } に自動確定する
これだけで、`fetchUser`の戻り値が変われば、連鎖的に`User`型も自動更新される。これが「堅牢な設計」の第一歩だ。
—
3. 実践：APIレスポンスとコンポーネント設計への応用
実務では、`Promise`でラップされたレスポンスを扱うことが多い。この場合、`infer`を入れ子にする必要がある。
// Promiseの中身を剥がすユーティリティ
type AwaitedReturnType
// APIクライアントの定義
const api = {
getUser: async (id: string) => ({ id, name: ‘Alice’ as const }),
getPosts: async (userId: string) => [{ id: 1, title: ‘TS Deep Dive’ }]
};
// 抽出結果をコンポーネントのPropsに流し込む
type User = AwaitedReturnType
const UserProfile = ({ user }: { user: User }) => {
return
;
};
なぜこの設計が優れているのか？
1. メンテナンスフリー: APIのレスポンス構造が変更されても、型定義を書き換える必要はゼロ。
2. 推論の連鎖: `api`オブジェクトが拡張されても、型は自動で追従する。
3. コンパイル時のパフォーマンス: `infer`による推論はTypeScriptの型推論エンジンにおいて極めて軽量だ。巨大なインターフェースを手動で記述・管理するよりも、コンパイラの負荷は遥かに低い。
—
4. プロダクション環境での注意点：型汚染を避ける
ただし、この手法には一点だけ注意が必要だ。「抽出元となる関数が、意図した通りの型を返しているか」という点だ。
もし`fetchUser`が`any`を返していたら、抽出された型もすべて`any`に汚染される。これを防ぐには、関数側に明確な戻り値の型注釈を（最小限の記述で）付与しておくのが、チーム開発における「守りの技術」だ。
// 戻り値の型を明示しておくことで、inferの精度と安全性を担保する
async function fetchUser(id: string): Promise<{ id: string; name: string }> {
return { id, name: ‘Alice’ };
}
最後に：型は「書く」ものではなく「導き出す」もの
優秀なTypeScriptエンジニアは、インターフェースを大量に手書きしない。彼らは、言語仕様をハックし、「すでにある情報から型を再構成する」仕組みを作る。
今回紹介した`infer`による抽出パターンは、大規模なフロントエンドアプリケーションにおいて、コードの堅牢性を保つための強力な武器になるはずだ。ぜひ、明日のコードレビューで「このインターフェース、手書きする必要ある？」と問いかけてみてほしい。
型システムを掌握せよ。それが、君を一段上のエンジニアへと引き上げる鍵だ。