」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 理解 TypeScript 中的 infer 關鍵字

理解 TypeScript 中的 infer 關鍵字

發佈於2024-11-03
瀏覽:444

Understanding the infer Keyword in TypeScript

TypeScript 是 JavaScript 的靜態型別超集,由於其能夠及早捕獲錯誤並提高程式碼可讀性,在技術社群中廣受歡迎。 TypeScript 的強大功能之一是 infer 關鍵字,它允許開發人員編寫更具表現力和動態的類型。

推斷關鍵字

TypeScript 2.8 中引入了 infer 關鍵字,用於在條件類型中建立臨時類型變數。然後,這些類型變數可用於推斷條件類型的 true 或 false 分支內的類型。 infer 關鍵字使開發人員能夠編寫更具動態性和表現力的類型,因為它允許 TypeScript 根據使用的上下文來確定特定類型。

為了更好地理解 infer 的工作原理,我們來看看條件類型的基本語法:

type MyConditionalType = T extends SomeType ? TrueType : FalseType;

在此範例中,T 是泛型型別參數,SomeType 表示與 T 進行比較的型別。如果 T 擴展 SomeType,則 MyConditionalType 的類型將為 TrueType。如果不是,則為 FalseType。

現在,讓我們將 infer 關鍵字引入其中:

type MyInferredType = T extends SomeType ? U : FalseType;

這裡,我們使用 infer 關鍵字在條件類型的 true 分支內建立一個臨時類型變數 U。如果 T 擴充 SomeType,TypeScript 將嘗試根據 T 的類型推斷 U 的類型。

範例

返回類型

ReturnType 是提取函數傳回類型的實用程式類型。這是如何使用 infer 關鍵字建立動態類型的完美範例。這是 ReturnType 的定義:

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

在此定義中,T 是函數類型,它接受任意數量的參數並傳回任意類型。使用 infer 關鍵字,我們建立一個臨時類型變數 R 來表示函數的回傳類型。如果 T 是函數,TypeScript 會推斷傳回類型並將其指派給 R。

讓我們來看看 ReturnType 的實際應用:

function greet(name: string): string {
  return `Hello, ${name}!`;
}
​
type GreetReturnType = ReturnType; // GreetReturnType is inferred as 'string'

這裡,ReturnType用來推斷greet函數的回傳類型,即string。

參數

利用 infer 關鍵字的另一個有用的實用程式類型是參數。此類型將函數的參數類型提取為元組。參數定義如下:

type Parameters any> = T extends (...args: infer P) => any ? P : never;

在這個例子中,我們建立一個臨時型別變數P來表示函數的參數型別。如果 T 是函數,TypeScript 會推斷參數類型並將它們作為元組指派給 P。

讓我們來看一個使用參數的範例:

function add(a: number, b: number): number {
  return a   b;
}
​
type AddParameters = Parameters; // AddParameters is inferred as [number, number]

這裡,Parameters用來推斷add函數的參數類型,是一個元組[number, number]。

PromiseType

PromiseType 實用程式類型可用於擷取 Promise 解析為的型別。這在處理非同步函數時特別有用。 PromiseType 的定義如下:

type PromiseType> = T extends Promise ? U : never;

在此範例中,我們建立一個臨時類型變數 U 來表示 Promise 解析為的類型。如果 T 是 Promise,TypeScript 會推斷已解析的類型並將其指派給 U。下面是一個範例:

async function fetchData(): Promise {
  return "Fetched data";
}
​
type FetchedDataType = PromiseType>; // FetchedDataType is inferred as 'string'

在本例中,PromiseType 用於推斷 fetchData 函數的 Promise 解析的類型,即 string。

UnboxArray

UnboxArray 實用程式類型可用於擷取陣列中元素的類型。 UnboxArray 的定義如下:

type UnboxArray> = T extends Array ? U : never;

在此範例中,我們建立一個臨時類型變數 U 來表示陣列中元素的類型。如果 T 是一個數組,TypeScript 會推斷元素類型並將其指派給 U。例如:

type MyArray = number[];

type ElementType = UnboxArray; // ElementType is inferred as 'number'

這裡,UnboxArray用來推斷MyArray型態內元素的型別,即number。

限制

雖然 infer 關鍵字非常強大,但它有一些限制:

  1. 只能在條件類型中使用。

  2. TypeScript 並不總是能夠推斷出正確的類型,尤其是在處理複雜或遞歸類型時。在這種情況下,開發人員可能需要提供額外的類型註解或重構其類型以幫助 TypeScript 推斷正確的類型。

結論

透過理解和利用 infer 的力量,您可以建立更靈活的 TypeScript 專案。立即開始考慮將 infer 關鍵字合併到您的工具包中。

如果您覺得這有幫助,請考慮 訂閱我的時事通訊 以獲取更多有關 Web 開發的有用文章和工具。感謝您的閱讀!

版本聲明 本文轉載於:https://dev.to/zacharylee/understanding-the-infer-keyword-in-typescript-20mg?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • Java中假喚醒真的會發生嗎?
    Java中假喚醒真的會發生嗎?
    在Java中的浪費喚醒:真實性或神話? 在Java同步中偽裝喚醒的概念已經是討論的主題。儘管存在這種行為的潛力,但問題仍然存在:它們實際上是在實踐中發生的嗎? Linux的喚醒機制根據Wikipedia關於偽造喚醒的文章,linux實現了pthread_cond_wait()功能的Linux實現,...
    程式設計 發佈於2025-07-25
  • Java的Map.Entry和SimpleEntry如何簡化鍵值對管理?
    Java的Map.Entry和SimpleEntry如何簡化鍵值對管理?
    A Comprehensive Collection for Value Pairs: Introducing Java's Map.Entry and SimpleEntryIn Java, when defining a collection where each element com...
    程式設計 發佈於2025-07-25
  • 如何在Java字符串中有效替換多個子字符串?
    如何在Java字符串中有效替換多個子字符串?
    在java 中有效地替換多個substring,需要在需要替換一個字符串中的多個substring的情況下,很容易求助於重複應用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    程式設計 發佈於2025-07-25
  • C++成員函數指針正確傳遞方法
    C++成員函數指針正確傳遞方法
    如何將成員函數置於c [&& && && && && && && && && && &&&&&&&&&&&&&&&&&&&&&&&華儀的函數時,在接受成員函數指針的函數時,要在函數上既要提供指針又可以提供指針和指針到函數的函數。需要具有一定簽名的功能指針。要通過成員函數,您需要同時提供對象指針(此...
    程式設計 發佈於2025-07-25
  • 如何使用Regex在PHP中有效地提取括號內的文本
    如何使用Regex在PHP中有效地提取括號內的文本
    php:在括號內提取文本在處理括號內的文本時,找到最有效的解決方案是必不可少的。一種方法是利用PHP的字符串操作函數,如下所示: 作為替代 $ text ='忽略除此之外的一切(text)'; preg_match('#((。 &&& [Regex使用模式來搜索特...
    程式設計 發佈於2025-07-25
  • 圖片在Chrome中為何仍有邊框? `border: none;`無效解決方案
    圖片在Chrome中為何仍有邊框? `border: none;`無效解決方案
    在chrome 在使用Chrome and IE9中的圖像時遇到的一個頻繁的問題是圍繞圖像的持續薄薄邊框,儘管指定了圖像,儘管指定了;和“邊境:無;”在CSS中。要解決此問題,請考慮以下方法: Chrome具有忽略“ border:none; none;”的已知錯誤,風格。要解決此問題,請使用以下...
    程式設計 發佈於2025-07-25
  • Python中嵌套函數與閉包的區別是什麼
    Python中嵌套函數與閉包的區別是什麼
    嵌套函數與python 在python中的嵌套函數不被考慮閉合,因為它們不符合以下要求:不訪問局部範圍scliables to incling scliables在封裝範圍外執行範圍的局部範圍。 make_printer(msg): DEF打印機(): 打印(味精) ...
    程式設計 發佈於2025-07-25
  • 左連接為何在右表WHERE子句過濾時像內連接?
    左連接為何在右表WHERE子句過濾時像內連接?
    左JOIN CONUNDRUM:WITCHING小時在數據庫Wizard的領域中變成內在的加入很有趣,當將c.foobar條件放置在上面的Where子句中時,據說左聯接似乎會轉換為內部連接。僅當滿足A.Foo和C.Foobar標準時,才會返回結果。 為什麼要變形?關鍵在於其中的子句。當左聯接的右側...
    程式設計 發佈於2025-07-25
  • 為什麼在我的Linux服務器上安裝Archive_Zip後,我找不到“ class \” class \'ziparchive \'錯誤?
    為什麼在我的Linux服務器上安裝Archive_Zip後,我找不到“ class \” class \'ziparchive \'錯誤?
    Class 'ZipArchive' Not Found Error While Installing Archive_Zip on Linux ServerSymptom:When attempting to run a script that utilizes the ZipAr...
    程式設計 發佈於2025-07-25
  • 在Python中如何創建動態變量?
    在Python中如何創建動態變量?
    在Python 中,動態創建變量的功能可以是一種強大的工具,尤其是在使用複雜的數據結構或算法時,Dynamic Variable Creation的動態變量創建。 Python提供了幾種創造性的方法來實現這一目標。 利用dictionaries 一種有效的方法是利用字典。字典允許您動態創建密鑰並...
    程式設計 發佈於2025-07-25
  • 為什麼Microsoft Visual C ++無法正確實現兩台模板的實例?
    為什麼Microsoft Visual C ++無法正確實現兩台模板的實例?
    The Mystery of "Broken" Two-Phase Template Instantiation in Microsoft Visual C Problem Statement:Users commonly express concerns that Micro...
    程式設計 發佈於2025-07-25
  • 如何在其容器中為DIV創建平滑的左右CSS動畫?
    如何在其容器中為DIV創建平滑的左右CSS動畫?
    通用CSS動畫,用於左右運動 ,我們將探索創建一個通用的CSS動畫,以向左和右移動DIV,從而到達其容器的邊緣。該動畫可以應用於具有絕對定位的任何div,無論其未知長度如何。 問題:使用左直接導致瞬時消失 更加流暢的解決方案:混合轉換和左 [並實現平穩的,線性的運動,我們介紹了線性的轉換。...
    程式設計 發佈於2025-07-25
  • Go web應用何時關閉數據庫連接?
    Go web應用何時關閉數據庫連接?
    在GO Web Applications中管理數據庫連接很少,考慮以下簡化的web應用程序代碼:出現的問題:何時應在DB連接上調用Close()方法? ,該特定方案將自動關閉程序時,該程序將在EXITS EXITS EXITS出現時自動關閉。但是,其他考慮因素可能保證手動處理。 選項1:隱式關閉終...
    程式設計 發佈於2025-07-25
  • 如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    postgresql:為每個唯一標識符在postgresql中提取最後一行,您可能需要遇到與數據集合中每個不同標識的信息相關的信息。考慮以下數據:[ 1 2014-02-01 kjkj 在數據集中的每個唯一ID中檢索最後一行的信息,您可以在操作員上使用Postgres的有效效率: id dat...
    程式設計 發佈於2025-07-25
  • 為什麼我在Silverlight Linq查詢中獲得“無法找到查詢模式的實現”錯誤?
    為什麼我在Silverlight Linq查詢中獲得“無法找到查詢模式的實現”錯誤?
    查詢模式實現缺失:解決“無法找到”錯誤在銀光應用程序中,嘗試使用LINQ建立錯誤的數據庫連接的嘗試,無法找到以查詢模式的實現。 ”當省略LINQ名稱空間或查詢類型缺少IEnumerable 實現時,通常會發生此錯誤。 解決問題來驗證該類型的質量是至關重要的。在此特定實例中,tblpersoon可能...
    程式設計 發佈於2025-07-25

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3