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

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

TypeScript での ReturnType と Awaited の使用

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

1.?関數(shù)の戻り値の型を取得する

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

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

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

// Promise を返します。

この例では:

foo 関數(shù)は文字列を返します。

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

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

type MyReturnType = ReturnType

この例では:

fooWithAsync 関數(shù)は、文字列に解決される Promise を返します。

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

3.?非同期関數(shù)に Awaited を使用する

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

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

この例では:

ReturnType は Promise を提供します。

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

概要:

ReturnType: 関數(shù)の戻り値の型を抽出します。
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 の同期関數(shù)と非同期関數(shù)の戻り値の型を効果的に決定できます。

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

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

それを壊す

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

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

結(jié)果: ? R:決して

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

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

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

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

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

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

TypeScript での型の結(jié)合と整形

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

1.?2 種類の組み合わせ

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

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. ネストされた型を美しくする

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

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

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

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

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 : ユーティリティ ユーティリティの種類の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。