TypeScript は静的に型付けされた JavaScript のスーパーセットで、エラーを早期に検出しコードの可読性を向上させる機能により、技術コミュニティで絶大な人気を集めています。 TypeScript の強力な機能の 1 つは infer キーワードです。これにより、開発者はより表現力豊かで動的な型を作成できます。

推測キーワード

TypeScript 2.8 で導入された infer キーワードは、一時的な型変数を作成するために条件付き型内で使用されます。これらの型変数を使用して、条件付き型の true または false 分岐内の型を推論できます。 infer キーワードを使用すると、TypeScript が使用されているコンテキストに基づいて特定の型を決定できるため、開発者はより動的で表現力豊かな型を作成できます。

推論がどのように機能するかをより深く理解するために、条件型の基本構文を見てみましょう。

type MyConditionalType = T extends SomeType ? TrueType : FalseType;

この例では、T はジェネリック型パラメーターであり、SomeType は T が比較される型を表します。 T が SomeType を拡張する場合、MyConditionalType の型は TrueType になります。そうでない場合は、FalseType.

さて、infer キーワードをミックスに導入しましょう:

type MyInferredType = T extends SomeType ? U : FalseType;

ここでは、infer キーワードを使用して、条件型の true 分岐内に一時的な型変数 U を作成します。 T が SomeType を拡張する場合、TypeScript は T の型に基づいて U の型を推測しようとします。

例

戻り値の種類

ReturnType は、関数の戻り値の型を抽出するユーティリティ型です。これは、infer キーワードを使用して動的タイプを作成する方法を示す完璧な例です。 ReturnType の定義は次のとおりです:

type ReturnType any> = T extends (...args: any[]) => infer R ? R : any;

この定義では、T は任意の数の引数を受け取り、任意の型を返す関数型です。 infer キーワードを使用して、関数の戻り値の型を表す一時的な型変数 R を作成します。 T が関数の場合、TypeScript は戻り値の型を推測し、それを R.

ReturnType の動作を見てみましょう:

function greet(name: string): string {
  return `Hello, ${name}!`;
}
​
type GreetReturnType = ReturnType; // GreetReturnType is inferred as 'string'

ここでは、ReturnType を使用して、greet 関数の戻り値の型 (文字列) を推測します。

パラメータ

infer キーワードを利用するもう 1 つの便利なユーティリティ タイプはパラメータです。この型は、関数のパラメータの型をタプルとして抽出します。パラメータの定義は次のとおりです:

type Parameters any> = T extends (...args: infer P) => any ? P : never;

この例では、関数のパラメーターの型を表す一時型変数 P を作成します。 T が関数の場合、TypeScript はパラメーターの型を推測し、それらをタプルとして P に割り当てます。

パラメータを使用した例を見てみましょう:

function add(a: number, b: number): number {
  return a   b;
}
​
type AddParameters = Parameters; // AddParameters is inferred as [number, number]

ここでは、パラメーターは、タプル [number,number].

プロミスタイプ

PromiseType ユーティリティ タイプを使用して、Promise が解決されるタイプを抽出できます。これは、非同期関数を扱う場合に特に便利です。 PromiseType の定義は次のとおりです:

type PromiseType> = T extends Promise ? U : never;

この例では、Promise が解決される型を表す一時型変数 U を作成します。 T が Promise の場合、TypeScript は解決された型を推測し、それを U に割り当てます。例は次のとおりです:

async function fetchData(): Promise {
  return "Fetched data";
}
​
type FetchedDataType = PromiseType>; // FetchedDataType is inferred as 'string'

この場合、PromiseType を使用して、fetchData 関数の Promise が解決される型 (string) を推論します。

配列のボックスを解除

UnboxArray ユーティリティ タイプを使用して、配列内の要素のタイプを抽出できます。 UnboxArray の定義は次のとおりです:

type UnboxArray> = T extends Array ? U : never;

この例では、配列内の要素の型を表す一時型変数 U を作成します。 T が配列の場合、TypeScript は要素の型を推測して U に割り当てます。例:

type MyArray = number[];

type ElementType = UnboxArray; // ElementType is inferred as 'number'

ここでは、UnboxArray を使用して、MyArray 型内の要素の型 (数値) を推論します。

制限事項

infer キーワードは非常に強力ですが、いくつかの制限があります:

1. 条件型内でのみ使用できます。

2. 特に複雑な型や再帰型を扱う場合、TypeScript が常に正しい型を推論できるとは限りません。このような場合、開発者は追加の型注釈を提供するか、TypeScript が正しい型を推測できるように型をリファクタリングする必要がある場合があります。

結論

推論の力を理解して活用することで、より柔軟な TypeScript プロジェクトを作成できます。今すぐ、ツールキットに infer キーワードを組み込む検討を始めてください。

これが役に立ったと思われた場合は、 ニュースレターの購読をご検討ください ウェブ開発に関するさらに役立つ記事やツールをご覧ください。読んでいただきありがとうございます!