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 的回傳類型，即 string。

2。 處理非同步函數

處理非同步函數時，傳回型別是 Promise。這是一個例子：

type MyReturnType = ReturnType<typeof foo>

在此範例中：

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;

分解

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 將是布林值，因為
範例函數是傳回布林值的函數類型。如果您使用非函數類型，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 中的所有屬性。

2. 美化巢狀類型

合併類型時，產生的類型有時看起來很混亂且難以閱讀。為了讓這些類型更具可讀性，您可以使用名為 Prettify 的實用程式類型。

輸入美化; = {[T 鍵中的 K]: T[K]};

此實用程式類型迭代 T 類型的鍵並重建它，使類型定義更清晰、更易於閱讀。

組合類型後，您可以使用 Prettify 公用程式類型來清理產生的類型

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

3. 檢查合併類型是否相等

為了確保合併後的類型完全符合您的預期，您可以使用實用程式類型來檢查兩種類型是否相同、精確或相等。

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

型 IsExact = [T] 延伸 [U] ? ([U] 延伸 [T] ? true : false) : false;

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

型 IsIdentical = T 延伸 U ? (U 擴充 T ? true : false) : false;

IsEqual：確保兩種類型具有相同的鍵。

型 IsEqual = keyof T 擴充 keyof U ？ (keyof U 擴充 keyof T ? true : false) : false;

您可以使用這些實用程式類型來檢查 CombinedType 是否與其他類型 OfferSummary 相同、精確或相等。

要在編譯時強制執行這些檢查，您可以使用斷言類型：

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 實用程式類型：選擇、省略、唯讀和部分

TypeScript 提供了一組強大的實用程式類型，可協助您建立更靈活且可重複使用的類型定義。我們將探討四種基本實用程式類型：選擇、省略、唯讀和部分。我們將使用電子商務應用程式中的實際範例來說明如何在現實場景中應用這些實用程式。

讓我們從我們將在本博文中使用的產品介面開始：

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

使用 Omit 用於產品表單

使用案例：建立用於新增產品的產品表單，其中某些欄位是自動產生的。

Omit 實用程式類型可讓您透過從現有類型中排除特定屬性來建立新類型。當特定上下文中不需要某些屬性時，這非常有用。

範例：

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

使用唯讀來獲取不可變的產品詳細資訊

使用案例：確保從資料庫取得產品詳細資訊後無法修改。

Readonly 實用程式類型使類型的所有屬性都變成唯讀，這表示它們在設定後無法變更。這對於創建不可變物件很有用。

範例：

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

使用 Partial 進行產品更新

用例：更新產品詳細信息，其中僅某些欄位可能會變更。

部分實用程式類型使類型的所有屬性都是可選的。當您需要為不需要所有屬性的物件建立類型時，這非常有用。

範例：

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中文網其他相關文章！