メインコンテンツにスキップ
モジュール 6 · レッスン 1 / 2コース内の 11/14~15 min
モジュールのレッスン (1/2)

条件付きタイプと推論

条件付き型を使用すると、継承関係に基づいて自明ではない型の決定を表現できます。構文は JavaScript の三項演算子に似ています。

TS
T extends U ? X : Y

タイプ T が U に割り当て可能な場合、結果のタイプは X になり、それ以外の場合は Y になります。


基本的な条件型

条件型はコンパイル時に条件を評価します。

TS
type IsNumber<T> = T extends number ? true : false;

type A = IsNumber<number>; // true
type B = IsNumber<string>; // false

このパターンは、ジェネリックと組み合わせて柔軟で動的なユーティリティ タイプを作成すると、非常に強力になります。


infer による型の抽出

条件型の extends 句内で、 infer キーワードを使用して、コンパイラによって推論される型変数を宣言できます。

たとえば、関数の戻り値の型を抽出したい場合は次のようになります。

TS
type GetReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

type ExampleFunction = () => string;
type Return = GetReturnType<ExampleFunction>; // string

この例では、infer R は、関数の戻り値の型を自動的に決定し、それを条件分岐の肯定的な分岐で R として使用できるようにするよう TypeScript に指示します。


自分で試してみてください

演習 1: IsString タイプ

運動#ts.m6.l1.e1
試行回数: 0読み込み中…

T が string を拡張する場合はリテラル型 true、それ以外の場合は false を返す IsString<T> という名前のジェネリック型を作成します。

エディターを読み込み中…
ヒントを表示

IsString<T> = T extends string ? という構文タイプを使用します。 true : false;種類を確認するためです。

3 回の試行後に解決策が利用可能になります

演習 2: infer を使用して配列から型を抽出する

運動#ts.m6.l1.e2
試行回数: 0読み込み中…

infer を使用して配列 T の要素の型を抽出するジェネリック型 UnpackArray<T> を定義します。 T が配列 (U[] など) の場合は U を返し、それ以外の場合は同じ型の T を返します。

エディターを読み込み中…
ヒントを表示

T extends (infer U)[] を使用しますか? U : T は、推論された型変数 U を宣言して返します。

3 回の試行後に解決策が利用可能になります