實用程序類型簡介

TypeScript 中的實用程序類型允許您通過包含、排除或修改屬性將現(xiàn)有類型轉(zhuǎn)換為新類型。當(dāng)您需要創(chuàng)建針對特定用例定制的類型定義而不重復(fù)代碼時，這非常有用。

在 TypeScript 中使用 ReturnType 和 Awaited

使用 TypeScript 時，您可能經(jīng)常需要確定函數(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。這是一個例子：

類型 MyReturnType = ReturnType

在此示例中：

fooWithAsync 函數(shù)返回一個解析為字符串的 Promise。

ReturnType?提取返回類型，即 Promise。

3。?使用 Awaited 實現(xiàn)異步函數(shù)

如果您想獲取異步函數(shù)返回的 Promise 的解析類型，可以使用 Awaited 實用程序類型。方法如下：

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

在此示例中：

ReturnType 提供 Promise。

期待已久>?將 Promise 解析為其基礎(chǔ)類型，即字符串。

摘要：

ReturnType：提取函數(shù)的返回類型。
等待：解析 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ù)的返回類型。

*在 TypeScript 中使用條件類型提取返回類型
*
在 TypeScript 中，您可以使用條件類型和類型推斷從函數(shù)類型中動態(tài)提取返回類型。這對于創(chuàng)建靈活且可重用的類型實用程序特別有用。讓我們探討一下它如何與 MyReturnTypeWithCondition 類型別名一起使用。

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

分解

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

這部分檢查 T 是否是函數(shù)類型。
...args: any[] 語法匹配任何函數(shù)簽名。
infer R 關(guān)鍵字將函數(shù)的返回類型捕獲到類型變量 R 中。

結(jié)果：？ R：從來沒有

如果 T 是函數(shù)類型，則類型別名解析為 R，即函數(shù)的返回類型。
如果 T 不是函數(shù)類型，則解析為 never。
實際例子

考慮以下示例來查看其實際效果：

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

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

在上面的示例中，ReturnType 將是布爾值，因為
示例函數(shù)是返回布爾值的函數(shù)類型。如果您使用非函數(shù)類型，ReturnType 將永遠(yuǎn)不會。

這種方法允許您創(chuàng)建高度適應(yīng)性的類型實用程序，可以根據(jù)類型的結(jié)構(gòu)推斷和操作類型。這是 TypeScript 的一個強(qiáng)大功能，可以增強(qiáng)類型安全性和代碼可維護(hù)性。

在 TypeScript 中組合和美化類型

使用 TypeScript 時，您經(jīng)常需要組合多種類型或接口來創(chuàng)建更復(fù)雜的結(jié)構(gòu)。這有時會導(dǎo)致類型難以閱讀和管理。本文檔將探討如何組合兩種類型、使嵌套類型更漂亮以及檢查合并類型是否相等。

1。?結(jié)合兩種類型

在 TypeScript 中組合兩種類型是一項常見任務(wù)。您可以使用交集類型 (&) 來實現(xiàn)此目的。假設(shè)您有兩個接口：OfferSummaryWithoutConfig 和 OfferTypeConfiguration，并且您想要將它們組合起來。

type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>

您可以使用交集類型 (&) 組合這兩個接口：

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

這將創(chuàng)建一個新類型，其中包含 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. 檢查合并類型是否相等

為了確保合并后的類型完全符合您的預(yù)期，您可以使用實用程序類型來檢查兩個類型是否相同、精確或相等。

IsExact：檢查兩種類型是否完全相同。

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

IsIdentical：使用條件類型來比較兩種類型。

類型 IsIdentical = T 延伸 U ? (U 擴(kuò)展 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;
};

實際例子

讓我們用一個實際的例子來總結(jié)一下：

type Prettify<T> = {

};

以上是TypeScript ：實用工具類型的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！