TypeScript : ユーティリティ ユーティリティの種類

ユーティリティタイプの概要

TypeScript のユーティリティ型を使用すると、プロパティを含めたり、除外したり、変更したりすることで、既存の型を新しい型に変換できます。これは、コードを複製せずに特定のユースケースに合わせた型定義を作成する必要がある場合に非常に役立ちます。

TypeScript での ReturnType と Awaited の使用

TypeScript を使用する場合、関数の戻り値の型を決定する必要があることがよくあります。 TypeScript は、この目的のために ReturnType と呼ばれる便利なユーティリティ タイプを提供します。非同期関数の処理を含め、その使用方法を見てみましょう。

1. 関数の戻り値の型を取得する

関数の戻り値の型を取得するには、ReturnType ユーティリティ タイプを使用できます。以下に例を示します:

function foo() {
const something:string = ""
return something;
}

function async fooWithAsync() {
const something:string = ""
return something;
}

// Promise を返します。

この例では:

foo 関数は文字列を返します。

ReturnType は、foo の戻り値の型 (文字列) を抽出します。
2. 非同期関数の処理

非同期関数を扱う場合、戻り値の型は Promise です。以下に例を示します:

type MyReturnType = ReturnType

この例では:

fooWithAsync 関数は、文字列に解決される Promise を返します。

ReturnType は戻り値の型 (Promise) を抽出します。

3. 非同期関数に Awaited を使用する

非同期関数によって返される Promise の解決済みタイプを取得したい場合は、Awaited ユーティリティ タイプを使用できます。その方法は次のとおりです:

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

この例では:

ReturnType は Promise を提供します。

待ってました> Promise をその基になる型である string に解決します。

概要:

ReturnType: 関数の戻り値の型を抽出します。
Awaited: Promise のタイプを解決します。

export const getEvents = async (user: User): Promise<ApiResponse> => {
const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`;
const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS);
const response: AxiosResponse = await apiInstance.get(eventsApiUrl);
return response.data;
};

type OfferEvent = Awaited<ReturnType<typeof getEvents>>;

const initEvent:OfferEvent = {event:[]}

これらのユーティリティ型を組み合わせることで、TypeScript の同期関数と非同期関数の戻り値の型を効果的に決定できます。

*TypeScript での条件付き型を使用した戻り値の型の抽出
*
TypeScript では、条件付き型と型推論を使用して、関数型から戻り値の型を動的に抽出できます。これは、柔軟で再利用可能なタイプのユーティリティを作成する場合に特に役立ちます。これが MyReturnTypeWithCondition タイプ エイリアスでどのように機能するかを見てみましょう。

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

それを壊す

Conditional Check: T extends (...args: any[]) => infer R

この部分は、T が関数型であるかどうかを確認します。
...args: any[] 構文は、任意の関数シグネチャと一致します。
infer R キーワードは、関数の戻り値の型を型変数 R にキャプチャします。

結果: ? R:決して

T が関数型の場合、型エイリアスは関数の戻り値の型である R に解決されます。
T が関数型ではない場合、never に解決されます。
実践例

これが実際に動作していることを確認するには、次の例を考えてください。

function foo() {
const something:string = ""
return something;
}

function async fooWithAsync() {
const something:string = ""
return something;
}

上の例では、
であるため、ReturnType はブール値になります。 Example Function は、ブール値を返す関数タイプです。関数以外の型を使用する場合、ReturnType は決して使用されません。

このアプローチにより、構造に基づいて型を推論および操作できる、適応性の高い型ユーティリティを作成できます。これは、タイプ セーフとコードの保守性を強化する TypeScript の強力な機能です。

TypeScript での型の結合と整形

TypeScript を使用する場合、多くの場合、複数の型またはインターフェイスを組み合わせて、より複雑な構造を作成する必要があります。これにより、読み取りや管理が困難な型が生成される場合があります。このドキュメントでは、2 つの型を結合し、ネストされた型をより美しくし、結合された型が等しいかどうかを確認する方法を説明します。

1. 2 種類の組み合わせ

TypeScript で 2 つの型を組み合わせるのは一般的なタスクです。これは、交差タイプ (&) を使用して実現できます。 Offer SummaryWithoutConfig と OfferTypeConfiguration という 2 つのインターフェースがあり、それらを結合したいとします。

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

交差タイプ (&) を使用して、これら 2 つのインターフェイスを組み合わせることができます。

export const getEvents = async (user: User): Promise<ApiResponse> => {
const eventsApiUrl: string = `${PROMOS_END_POINTS.EVENTS}`;
const apiInstance: AxiosInstance = getAxiosInstance(user, API_SERVICES.PROMOTIONS);
const response: AxiosResponse = await apiInstance.get(eventsApiUrl);
return response.data;
};

type OfferEvent = Awaited<ReturnType<typeof getEvents>>;

const initEvent:OfferEvent = {event:[]}

これにより、OffersummaryWithoutConfig と OfferTypeConfiguration の両方のプロパティをすべて含む新しいタイプが作成されます。

2. ネストされた型を美しくする

型をマージすると、結果の型が乱雑で読みにくくなることがあります。これらの型を読みやすくするには、Prettify というユーティリティ型を使用できます。

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

このユーティリティ タイプは、タイプ T のキーを反復処理して再構築し、型定義をよりクリーンで読みやすくします。

タイプを結合した後、Prettify ユーティリティ タイプを使用して、結果のタイプをクリーンアップできます

Conditional Check: T extends (...args: any[]) => infer R

3. マージされたタイプが等しいかどうかを確認する

マージされた型が期待どおりであることを確認するには、ユーティリティ型を使用して 2 つの型が同一であるか、正確であるか、等しいかどうかを確認します。

IsExact: 2 つの型がまったく同じかどうかを確認します。

type ExampleFunction = (x: number, y: string) => boolean;
type ReturnType = MyReturnTypeWithCondition<ExampleFunction>; 
// ReturnType will be boolean

IsIdentical: 条件付きタイプを使用して 2 つのタイプを比較します。

type IsIdentical = T は U を拡張しますか? (U extends T ? true : false) : false;

IsEqual: 両方の型が同じキーを持つことを確認します。

export interface OfferSummaryWithoutConfig {
  id: string;
  auditInfo: AuditInfo;
  offerBasicInfo: OfferBasicInfo;
  metaData: MetaData;
  conditionGroupsSummary: ConditionGroupsSummary[];
  rewardGroupsSummary: RewardGroupsSummary[];
  userOperations: ActionPermission;
}

export interface OfferTypeConfiguration {
  id: number;
  name: string;
  description: string;
  configuration: Configuration;
}

これらのユーティリティ タイプを使用して、CombinedType が別のタイプ Offersummary と同一、正確、または等しいかどうかを確認できます。

type CombinedType = OfferSummaryWithoutConfig & {
  offerTypeConfiguration: OfferTypeConfiguration;
};

実践例

実際の例ですべてをまとめてみましょう:

type Prettify<T> = {

};

以上がTypeScript : ユーティリティ ユーティリティの種類の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。