【実務・中級編】 infer キーワード – TypeScript実践ガイド

お疲れ。最近、君が書いた型定義のプルリクを見たんだが……おや、また`any`で逃げようとした跡があるね（笑）。まあ、焦るな。中級の壁にぶつかっている証拠だ。ここを抜ければ、君はもう一段上の「型を自由自在に操るエンジニア」になれる。

今回は、TypeScriptのConditional Types（条件付き型）の中でも一際異彩を放つ、`infer`キーワードについて徹底的に解説しよう。

公式ドキュメントを読んでも「型を推論する」としか書いてなくてピンとこないかもしれないが、現場のプロ目線で言えば、「複雑な既存の型から、パズルのピースのように特定の型を取り出すための極上のスナイパーライフル」だと思えばいい。

さあ、エンジンを温めてくれ。実務で即座に使えるレベルまで一気に引き上げてやるよ。

—

1. `infer` とは何か？（なぜ現場で必要なのか）

TypeScriptを書いていると、外部ライブラリが提供する型や、複雑にネストされたオブジェクトの「中身の型だけ」が欲しい場面に直面しないか？

例えば、「関数の戻り値の型だけ」や「配列の要素の型だけ」が欲しいとき、わざわざ手動で書き直すのはDRY原則（Don’t Repeat Yourself）に反するし、元が変わったときに破綻する。

ここで登場するのが `infer` キーワードだ。
`infer` は、Conditional Types（`T extends U ? X : Y`）の条件部の中でしか使えないという厳格なルールがある。条件にマッチした際、その一部分を一時的な「型変数」としてキャプチャし、真（true）側の分岐で再利用できるようにする魔法の構文だ。

脳内イメージ：ブラウザやTSコンパイラは裏側で何をしているのか？

TypeScriptの型システムは、最終的にJavaScriptにコンパイルされる時にはすべて消え去る。つまり、ブラウザのJSエンジンは `infer` の存在すら知らない。

では、誰がこれを処理しているのか？ TypeScriptの型チェッカー（tsc）だ。
型チェッカーは、コンパイル時にAST（抽象構文木）を走査しながら、ジェネリクスに渡された型がパターンの構造（構造的部分型）に合致するかどうかをパターンマッチングしている。

[渡された型: T] ──MATCH?──> [infer U で部分を切り出す] ──> [U を返す]

この「パターンマッチングによる型の一部分の切り出し」こそが、`infer` の正体なのだ。

—

2. 現場で即効性のある実践コード例

百聞は一見にしかずだ。実務でよく遭遇する3つのユースケースを見ていこう。そのままエディタにコピペして挙動を確認してくれ。

パターンA：関数の「戻り値の型」を強制的に剥ぎ取る（`Awaited` や Redux の Thunk対策など）

APIクライアントから返ってくる関数の戻り値の型を、そのまま別のコンポーネントのPropsとして使いたいときはよくある。しかし、わざわざ別で型を定義するのはダサい。

// 自作の ReturnType を作ってみよう
type MyReturnType = T extends (…args: any[]) => infer R ? R : never;

// テスト用の関数
function fetchUserProfile() {
return {
id: 1,
name: ‘Taro Yamada’,
email: ‘taro@example.com’,
};
}

// 関数の型から「戻り値のオブジェクト型」だけを綺麗に抽出する
type UserProfile = MyReturnType;
// 展開結果:
// type UserProfile = {
// id: number;
// name: string;
// email: string;
// }

const user: UserProfile = {
id: 2,
name: ‘Hanako Suzuki’,
email: ‘hanako@example.com’,
};

パターンB：配列やタプルから「要素の型」を強奪する

APIから返ってくる配列のレスポンス。その「1要素分の型」が欲しいときに、`Array` や `T[]` から型を引っこ抜くテクニックだ。

// 配列の要素の型を推論するカスタム型
type UnpackArray = T extends (infer U)[] ? U : T;

// 文字列の配列
type StringArray = string[];
type ExtractedString = UnpackArray; // string

// 読み取り専用配列（readonly）やタプルにも対応させたい場合の発展形
type DeepUnpack = T extends readonly (infer U)[] ? U : T;

type MyTuple = [string, number, boolean];
// ※通常の (infer U)[] だとタプル全体がマッチしてしまうので、
// 必要に応じて条件をチューニングするのがプロの技だ。

パターンC：Promiseの「中身（Resolved value）」を暴く（現代フロントエンドの必須技）

Async/Awaitが当たり前の現代、Promiseに包まれた型から「中身のデータ型」を取り出したい場面は星の数ほどある。TypeScript標準にも `Awaited` があるが、内部の仕組みはまさに `infer` だ。

// 自作の Promise Unwrapper
type UnwrapPromise = T extends Promise ? UnwrapPromise : T;