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;
} // will return Promise<?> 

この例では:

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

ReturnType: foo の戻り値の型 (文字列) を抽出します。

2. 非同期関数の処理

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

type MyReturnType = ReturnType<typeof foo>

この例では:

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;

それを壊す

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?> 

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

結果: ? R:決して

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

実践例

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

type MyReturnType = ReturnType<typeof foo>

上の例では、
であるため、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 というユーティリティ型を使用できます。

「Prettify」と入力 = {[K in keyof T]: T[K]};

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

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

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

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

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

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

タイプ IsExact = [T] は [U] を拡張しますか? ([U] は [T] を拡張します ? true : false) : false;

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

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

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

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

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

コンパイル時にこれらのチェックを強制するには、Assert タイプを使用できます。

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?> 

実践例

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

type MyReturnType = ReturnType<typeof foo>

結論

Prettify ユーティリティ タイプを使用すると、ネストされたタイプをより読みやすく、管理しやすくすることができます。交差タイプ (&) を使用してタイプを結合すると、操作が簡単な複雑な構造を作成できます。さらに、IsExact、IsIdentical、IsEqual などのユーティリティ タイプを使用すると、マージされたタイプが期待どおりであることを確認できます。

TypeScript ユーティリティ タイプの使用: Pick、 Omit、 Readonly、および Partial

TypeScript は、より柔軟で再利用可能な型定義の作成に役立つ強力なユーティリティ型のセットを提供します。ここでは、Pick、Omit、Readonly、Partial の 4 つの重要なユーティリティ タイプについて説明します。電子商取引アプリケーションの実際的な例を使用して、これらのユーティリティを現実世界のシナリオにどのように適用できるかを説明します。

このブログ投稿全体で使用するプロダクト インターフェースから始めましょう:

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

商品概要に選択を使用する

使用例: 製品リスト ページに製品概要を表示します。

Pick ユーティリティ タイプを使用すると、既存のタイプから特定のプロパティを選択して新しいタイプを作成できます。これは、プロパティのサブセットのみが必要な場合に便利です。

例:

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:[]}

商品フォームに省略を使用する

使用例: 新しい製品を追加するための製品フォームを作成し、特定のフィールドが自動生成されます。

[省略]ユーティリティ タイプを使用すると、既存のタイプから特定のプロパティを除外して新しいタイプを作成できます。これは、特定のコンテキストで特定のプロパティが必要ない場合に便利です。

例:

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

不変の商品詳細に読み取り専用を使用する

ユースケース: データベースから取得した後に製品の詳細が変更できないようにします。

Readonly ユーティリティ タイプは、タイプのすべてのプロパティを読み取り専用にします。つまり、設定後に変更することはできません。これは、不変オブジェクトを作成する場合に便利です。

例:

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

製品アップデートに一部を使用する

ユースケース: 一部のフィールドのみが変更される可能性がある製品の詳細を更新します。

部分ユーティリティ タイプでは、タイプのすべてのプロパティがオプションになります。これは、すべてのプロパティが必要なわけではないオブジェクトのタイプを作成する必要がある場合に便利です。

例:

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

function async fooWithAsync() {
const something:string = ""
return something;
} // will return Promise<?> 

結論

Pick、Omit、Readonly、Partial などのユーティリティ タイプは、より柔軟で再利用可能な型定義の作成に役立つ TypeScript の強力なツールです。これらのユーティリティを理解して使用することで、よりクリーンで保守しやすいコードを作成できます。

独自のプロジェクトでこれらのユーティリティ型を自由に試して、型定義がどのように簡素化されるかを確認してください。

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