實用程式類型簡介
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。這是一個例子:
類型 MyReturnType = ReturnType
在此範例中:
fooWithAsync 函數傳回一個解析為字串的 Promise。
ReturnType 提取回傳類型,即 Promise。
3。 使用 Awaited 實現非同步函數
如果您想要取得非同步函數傳回的 Promise 的解析類型,可以使用 Awaited 實用程式類型。方法如下:
type MyAsyncReturnType = Awaited<ReturnType<typeof foo>>
在此範例中:
ReturnType 提供 Promise。
期待已久> 將 Promise 解析為其基礎型,即字串。
摘要:
ReturnType:提取函數的回傳類型。
等待:解析 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 將是布林值,因為
範例函數是傳回布林值的函數類型。如果您使用非函數類型,ReturnType 將永遠不會。
這種方法可讓您建立高度適應性的類型實用程序,可以根據類型的結構推斷和操作類型。這是 TypeScript 的一個強大功能,可以增強類型安全性和程式碼可維護性。
在 TypeScript 中組合和美化類型
使用 TypeScript 時,您經常需要組合多種類型或介面來建立更複雜的結構。這有時會導致類型難以閱讀和管理。本文檔將探討如何組合兩種類型、使巢狀類型更漂亮以及檢查合併類型是否相等。
1。 結合兩種類型
在 TypeScript 中組合兩種類型是一項常見任務。您可以使用交集類型 (&) 來實現此目的。假設您有兩個介面: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:[]}
這將建立一個新類型,其中包含 OfferSummaryWithoutConfig 和 OfferTypeConfiguration 中的所有屬性。
合併類型時,產生的類型有時看起來很混亂且難以閱讀。為了讓這些類型更具可讀性,您可以使用名為 Prettify 的實用程式類型。
type MyReturnTypeWithCondition<T> = T extends (...args: any[]) => infer R ? R : never;
此實用程式類型迭代 T 類型的鍵並重建它,使類型定義更清晰、更易於閱讀。
組合類型後,您可以使用 Prettify 公用程式類型來清理產生的類型
Conditional Check: T extends (...args: any[]) => infer R
為了確保合併後的類型完全符合您的預期,您可以使用實用程式類型來檢查兩種類型是否相同、精確或相等。
IsExact:檢查兩種類型是否完全相同。
type ExampleFunction = (x: number, y: string) => boolean; type ReturnType = MyReturnTypeWithCondition<ExampleFunction>; // ReturnType will be boolean
IsIdentical:使用條件類型來比較兩種類型。
型 IsIdentical
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中文網其他相關文章!