理解 TypeScript 中的 infer 關鍵字

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

推測キーワード

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

推論の仕組みをよりよく理解するために、条件型の基本構文を見てみましょう。

type MyConditionalType<t> = T extends SomeType ? TrueType : FalseType;
</t>

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

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

type MyInferredType<t> = T extends SomeType<infer u> ? U : FalseType;
</infer></t>

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

例

ReturnType

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

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

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

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

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

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

パラメータ

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

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

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

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

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

ここでは、Parameters を使用して、add 関数のパラメーターの型 (タプル [number,number]) を推論します。

PromiseType

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

type PromiseType<t extends promise>> = T extends Promise<infer u> ? U : never;
</infer></t>

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

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

この場合、PromiseType は、fetchData 関数の Promise が解決する型 (文字列) を推論するために使用されます。

Array のボックスを解除

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

type UnboxArray<t extends array>> = T extends Array<infer u> ? U : never;
</infer></t>

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

type MyArray = number[];

type ElementType = UnboxArray<myarray>; // ElementType is inferred as 'number'
</myarray>

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

制限事項

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

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

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

結論

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

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

以上是理解 TypeScript 中的 infer 關鍵字的詳細內容。更多資訊請關注PHP中文網其他相關文章！