こんにちは！
TSKaigi の運営チームの添田です。

この記事はTypeScript Advent Calendar 2023の22日目の記事です！
https://qiita.com/advent-calendar/2023/typescript

※TSKaigi とは、現在企画中の TypeScript の大規模カンファレンスで、
運営チームはTypeScript好きのエンジニア達で結成されている素敵なチームです。

この記事について

inferが突然出てきて戸惑い、コツを掴めずに理解に時間がかかった経験がありました。
そんなinferについて自分なりにまとめた記事となります。

inferを理解するためにやったこと

Conditional Typeについて復習

まずinferを理解するにあたり、
ベーシックなConditional Typeについて復習をしました。
以下はTypeScript公式からコードをいただいてます。

interface Animal {
  live(): void;
}
interface Dog extends Animal {
  woof(): void;
}

type Example1 = Dog extends Animal ? number : string;
type Example2 = RegExp extends Animal ? number : string;

この三項演算子みたいなのがConditional Typeですね。

条件型：

T extends U ? X : Y

T extends U　は、T型がU型のサブタイプ（つまり、U型に代入可能）であるかどうかをチェックします。
? X : Yは、T extends UがtrueであればX型を返し、そうでなければY型を返します。

つまり、T型がU型に含まれている時に、X型を返し、含まれなければY型を返します。

Conditional TypeのUの部分に注目

先ほどのConditional Typeを理解した上で、inferについて再度理解を始めました。

条件型：

T extends U ? X : Y

inferとは、の U の部分で使うキーワードです。
inferはTypeScriptの条件型で使われる特殊なキーワード、「条件型」です。

（・・なんだか良く分からない）

「条件型」は、ある型が特定の条件を満たすかどうかをチェックし、その結果によって異なる型を返すことができる機能です。
これはプログラミングのif文のようなものですが、型に対して行います。
そして、inferキーワードはこの「条件型」の中で使われ、特定の型から別の型を「推論」（つまり、取り出す）するために使われます。

例えば、ある関数の戻り値の型を知りたいときに、inferを使うことができます。

またTypeScript公式のコードを見てみました。

type GetReturnType<Type> = Type extends (...args: never[]) => infer Return
  ? Return
  : never;

type Num = GetReturnType<() => number>;

type Str = GetReturnType<(x: string) => string>;

type Bools = GetReturnType<(a: boolean, b: boolean) => boolean[]>;

確かに
U の所が (...args: never[]) => infer Return になっている。

上記は、Type（T）が「（引数を取らない）関数」であるかどうかをチェックしています。

もしTypeが関数であれば、その関数の戻り値の型を infer Return で取り出し、その型 Return を返します。
もしTypeが関数でなければ、never型を返します。

ちなみに引数を取る関数の場合は、...args: any[] となります。

補足ですが、
...args は arguments オブジェクトでJavaScriptでも使われています。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/arguments
arguments は配列風 (Array-like) オブジェクトであり、関数に渡された引数の値を含んでおり、関数内からアクセスすることができます。

（少し理解してきた。でも実際に使えるのだろうか？）

もう１つサンプルコードを見てみました。

またまたTypeScript公式のコードを見て確認をしていきました。

type Unpacked<T> = T extends (infer U)[]
  ? U
  : T extends (...args: any[]) => infer U
  ? U
  : T extends Promise<infer U>
  ? U
  : T;
type T0 = Unpacked<string>; // string
type T1 = Unpacked<string[]>; // string
type T2 = Unpacked<() => string>; // string
type T3 = Unpacked<Promise<string>>; // string
type T4 = Unpacked<Promise<string>[]>; // Promise<string>
type T5 = Unpacked<Unpacked<Promise<string>[]>>; // string

（くぅ、、、inferが３つもあってさっきのより難しい気がする・・）

（いや！よく見たらわかる。）

T extends (infer U)[]
T型が配列型であるかどうかをチェックしている。
配列型であれば、その配列の要素の型をinfer Uで取り出し、その型U型を返す。

T extends (...args: any[]) => infer U
関数型であるかどうかをチェック。

T extends Promise
Promise型であるかどうかをチェック。

string型は配列型でも関数型でもPromise型でもないのは、そのまま型を返す。
だから以下のコードはstringを返す。
type T0 = Unpacked; // string

（少し利点も分かってきて使えそうな気がしてきた！）

以上となります。

TypeScriptは勉強すればする程難しくなってきて、奥が深くとっても楽しいと思ってます！
日々綺麗なTypeScriptコードを学んで、もっともっと使いこなせる様になっていきたいと思ってます！

読んでくださりありがとうございました。

よいクリスマスを！
❄ Merry❄ 。 • ˚ ˚ ˛ ˚ ˛ • ❄
•。★❄ Christmas❄ 。。❄
° 。 ° ˛˚˛ * Π____*。*˚
˚ ˛❄ •˛•˚ */______/~＼。˚
˚. •˛• ❄˚ ｜田｜門｜ ˚
⌒⌒⌒⌒⌒⌒⌒⌒ ⌒⌒⌒ ⌒

▼参考にさせていただいた神記事
https://zenn.dev/oreo2990/articles/1040312d7af066
https://qiita.com/iwata-goq/items/677251ce778afcacd33e

▼公式
https://www.typescriptlang.org/docs/handbook/2/conditional-types.html