11. TypeScript 工具類型

TypeScript 提供了一系列內置的“工具類型”(Utility Types),它們是對已有類型進行變換的便捷方式。通過這些工具類型,開發者可以更靈活、可維護地進行類型設計,避免重復定義類型邏輯。

工具類型的作用主要有:

  • 快速基于已有類型創建新類型;
  • 控制屬性的可選性、只讀性、選擇性;
  • 提升代碼可讀性與復用性。

下面,我們將詳細講解 TypeScript 提供的常用工具類型及其應用示例。

一、Partial<Type>

作用:將某個類型的所有屬性變為可選。

語法

Partial<T>

示例

interface User {Id: string;email: string;
}type PartialUser = Partial<User>;const partialUser: PartialUser = { Id: '123' };console.log(partialUser); // 輸出: { Id: '123' }

說明:

  • PartialUser 中的所有屬性都是可選的。
  • partialUser 只傳入了 Id 屬性也合法。

二、Required<Type>

作用:將某個類型中的所有屬性變為必填。

語法

Required<T>

示例

interface User {name?: string;age?: number;
}type RequiredUser = Required<User>;const requiredUser: RequiredUser = { name: 'John', age: 20 };console.log(requiredUser); // 輸出: { name: 'John', age: 20 }

說明:

  • RequiredUser 中的所有屬性都變成了必填。
  • 缺少任何屬性都會報錯。

三、Readonly<Type>

作用:將類型中所有屬性標記為只讀,禁止修改。

語法

Readonly<T>

示例

interface User {name: string;age: number;
}type ReadonlyUser = Readonly<User>;const readonlyUser: ReadonlyUser = { name: 'John', age: 30 };readonlyUser.name = 'Jane'; 
// 報錯:Cannot assign to 'name' because it is a read-only property.

說明:

  • ReadonlyUser 的屬性不能被修改。
  • 用于實現對象的不可變性。

四、Pick<Type, Keys>

作用:從類型 T 中挑選出一組指定的屬性,構成新類型。

語法

Pick<T, K>

示例

interface User {name: string;age: number;email: string;
}type UserSummary = Pick<User, 'name' | 'email'>;const userSummary: UserSummary = { name: 'ram', email: 'ram@example.com' };console.log(userSummary); // 輸出: { name: 'ram', email: 'ram@example.com' }

說明:

  • 只選擇了 User 中的 nameemail 屬性。

五、Parameters<Type>

作用:提取函數類型中所有參數類型,組成元組類型。

語法

Parameters<T>

示例

function sum(a: number, b: number): number {return a + b;
}type SumParams = Parameters<typeof sum>;  // [number, number]const params: SumParams = [1, 2];console.log(params); // 輸出: [1, 2]

說明:

  • SumParams 是一個元組類型 [number, number]
  • 可以動態地從函數中提取參數類型進行復用。

六、Record<Keys, Type>

作用:構建一個具有固定 key 的對象類型,所有 key 對應的值都是指定的類型。

語法

Record<K, T>

示例

type Fruit = 'apple' | 'banana' | 'orange';type Inventory = Record<Fruit, number>;const inventory: Inventory = {apple: 10,banana: 15,orange: 20
};console.log(inventory); 
// 輸出: { apple: 10, banana: 15, orange: 20 }

說明:

  • Inventory 是一個 key 為水果名,value 為數量的對象。
  • 保證所有 key 都存在,且值為 number 類型。

七、Exclude<Type, ExcludedUnion>

作用:從聯合類型 T 中排除掉屬于 U 的部分。

語法

Exclude<T, U>

示例

type Status = 'pending' | 'approved' | 'rejected';type NonRejectedStatus = Exclude<Status, 'rejected'>;const status: NonRejectedStatus = 'approved';console.log(status); // 輸出: approved

說明:

  • NonRejectedStatus 只包含 'pending''approved',排除了 'rejected'
  • 如果賦值為 'rejected' 會報錯。

八、使用建議和最佳實踐

  1. 理解每種工具類型的用途:如 Partial 用于表單、更新操作,Readonly 用于不可變數據。
  2. 保持類型一致性:統一使用工具類型能讓代碼更具可讀性。
  3. 合理組合工具類型:可以 PickReadonly,但避免過度嵌套造成難以維護。

九、總結

TypeScript 的工具類型為我們提供了一套強大且靈活的類型變換機制,可以讓類型定義更加精簡、強大而不失可讀性。無論是在業務模型構建、表單設計還是 API 數據轉換中,它們都能大幅提升代碼的開發效率與維護質量。

推薦使用場景包括

  • 接口部分字段可選(使用 Partial
  • 創建只讀數據模型(使用 Readonly
  • 提取函數參數、返回值類型(使用 Parameters, ReturnType
  • 對接口類型取子集(使用 Pick, Omit
  • 創建特定 key 的對象(使用 Record

充分掌握這些工具類型,是成為 TypeScript 高效開發者的必經之路。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/87902.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/87902.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/87902.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Kafka性能調優全攻略:從JVM參數到系統優化

前言 在大數據處理領域&#xff0c;Kafka以其高吞吐、高并發的特性成為消息隊列的首選。然而&#xff0c;隨著業務規模的擴大和數據量的激增&#xff0c;若配置不當&#xff0c;Kafka的性能和穩定性會受到嚴重影響。其中&#xff0c;JVM參數的調整是優化Kafka性能的關鍵一環&a…

HarmonyOS 5 NPU支持哪些AI框架?

以下是HarmonyOS 5 NPU支持的AI框架及適配方案&#xff0c;結合關鍵技術和實測數據&#xff1a; 一、原生支持框架 MindSpore Lite? ?核心特性?&#xff1a; 原生適配昇騰達芬奇架構&#xff0c;支持INT8/FP16混合量化自動算子融合優化&#xff08;實測推理速度提升3.2倍…

鴻蒙uvc預覽

簡單查看流程&#xff0c;如有錯誤請指出。 CameraNativePreview.ets--> 這里開始進入uvc_camera庫 (CameraDevice.ets/CameraManager.ets) --> CameraUtils.ets--> -->CameraNativeMethods(index.d.ts文件&#xff0c;路徑: uvc_camera\src\main\cpp\types\…

PHP的打印語句

文章目錄 環境總結打印語句換行符括號數組&#xff08;對象&#xff09;和字符串之間的相互轉換 打印語句echoprint括號print_rvar_dump 數組&#xff08;對象&#xff09;和字符串之間的轉換json_encodejson_decodeimplodeexplode 環境 PHP 8.4.5 總結 如果不想看詳細介紹&…

功率MOSFET的SOA曲線

功率MOSFET的SOA曲線 SOA區指的是MOSFET的安全工作區&#xff0c;英文表示為Safe Operating Area&#xff0c;是指MOSFET&#xff08;金屬氧化物半導體場效應晶體管&#xff09;的安全操作范圍。在線性模式運行的情況下&#xff0c;SOA特別有用。但開關模式下&#xff0c;一般…

Stacking集成BP神經網絡/RF/SVM和遺傳算法的煤炭配比優化

一、煤炭配比優化的問題本質與技術路線 煤炭配比需同時滿足煤質指標&#xff08;灰分、揮發分、熱值&#xff09;、燃燒特性&#xff08;著火溫度、燃盡指數&#xff09;、經濟成本等多目標優化。傳統方法依賴經驗公式&#xff0c;難以處理非線性關系&#xff1a; 核心難點&a…

Unity Shader開發-著色器變體(2)-定義著色器變體

一.定義著色器變體 定義一個著色器變體&#xff08;Shader Variant&#xff09;從概念和實現上講&#xff0c;主要包括以下幾個核心部分 1.使用預編譯指令來聲明變體關鍵字 關鍵字是驅動變體生成的“開關”。它們是簡單的字符串標識符&#xff0c;用于在 Shader 代碼中標記不…

sql server耗時模擬

REATE PROCEDURE SimulateDelay AS BEGINPRINT 開始耗時操作...;-- 模擬等待 5 秒WAITFOR DELAY 00:00:05;PRINT 耗時操作完成。; END 方法二&#xff1a;使用忙循環(不推薦&#xff0c;CPU 占用高) CREATE PROCEDURE SimulateBusyLoop AS BEGINDECLARE start DATETIME GETDAT…

Zookeeper的典型應用場景?

大家好&#xff0c;我是鋒哥。今天分享關于【Zookeeper的典型應用場景?】面試題。希望對大家有幫助&#xff1b; Zookeeper的典型應用場景? 超硬核AI學習資料&#xff0c;現在永久免費了&#xff01; Zookeeper 是一個分布式協調服務&#xff0c;廣泛應用于需要高可用性、分…

STM32F103_LL庫+寄存器學習筆記12.3 - 串口DMA高效收發實戰3:支持多實例化的版本

導言 《STM32F103_LL庫寄存器學習筆記12.2 - 串口DMA高效收發實戰2&#xff1a;進一步提高串口接收的效率》基于上一個版本&#xff0c;進一步提升代碼的模塊化水平&#xff0c;支持多實例化。 如上所示&#xff0c;收發大量的數據&#xff0c;沒有丟包。 項目地址&#xff1a…

跨平臺的重構版Notepad++文本編輯器

跨平臺 Notepad 替代方案 Notepad 是 Windows 平臺上的流行文本編輯器&#xff0c;但其原生版本不支持跨平臺。以下是功能相似且支持多平臺的替代工具&#xff1a; Notepadqq&#xff08;Linux/macOS/Windows&#xff09; Notepadqq 是 Notepad 的開源跨平臺版本&#xff0c…

意法STM32F103C8T6 單片機ARM Cortex-M3 國民MCU 電機控制到物聯網專用

STM32F103C8T6 單片機全面解析 1. 產品定位 STM32F103C8T6 是意法半導體&#xff08;ST&#xff09;推出的 經典ARM Cortex-M3內核單片機&#xff0c;采用 LQFP48封裝&#xff0c;以 高性能、豐富外設和超高性價比 成為嵌入式開發領域的"國民MCU"。 2. 核心功能特…

Sui 技術如何助力 Claynosaurz 成功推出 Popkins NFT

像 Claynosaurz 這樣的品牌利用 Sui 推動鏈上創新的邊界&#xff0c;展示了 Web3 如何結合互動娛樂并帶來獨特全新的體驗。Claynosaurz 最近在 Sui 上推出的 Popkins NFT 系列及其大型抽獎活動&#xff0c;不僅在社區參與度上取得了成功&#xff0c;也有力地展示了 Sui 獨特的技…

OpenCV CUDA模塊設備層-----反正弦運算函數asin()

操作系統&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 編程語言&#xff1a;C11 算法描述 對一個 uchar 類型的像素值&#xff08;范圍 [0, 255]&#xff09;&#xff0c;先歸一化到浮點范圍 [0.0, 1.0]&#xff0c;然后計算其反正弦值 …

PixiJS 中 HTMLText 富文本渲染問題探究與優化思考?

起因 在使用 PixiJS 進行富文本渲染開發過程中&#xff0c;遭遇 HTMLText 組件處理中文字體加載時出現顯著卡頓現象。針對此問題&#xff0c;在開源社區提交 issue 并附上相關技術細節與運行表現&#xff0c;期望獲得解決方案。 提issues 從 issue 反饋內容來看&#xff0c;項目…

五、Redis的IO模型

簡介 在談及Redis為什么快的時候&#xff0c;很多人都只能回答redis是基于內存&#xff0c;所以快。但他們往往不知道&#xff0c;決定redis快的因素&#xff0c;還有它的IO模型-Reactor模型。談及Redis的IO模型之前&#xff0c;先補充一下IO模型的基礎知識。 IO模型演化 1.堵塞…

Cesium、ThreeWebGL詳解(二)渲染引擎向GPU傳數據、性能優化、引擎對比

下面從 API 定位、坐標體系、性能表現、面試常問點幾個維度詳細對比 Cesium、Three.js 與原生 WebGL 的繪制差異。 &#x1f9ed; 1. API 定位與典型應用 Cesium 聚焦全地球 GIS 場景&#xff0c;支持地形、影像、時空動態等地理信息功能&#xff0c;是專業級地圖應用首選。 T…

單點登錄(SSO)系統

設計一個 Java 單點登錄&#xff08;SSO&#xff09;系統需要解決跨系統認證和會話共享問題。以下是核心設計和實現方案&#xff0c;包含關鍵組件和代碼示例&#xff1a; 一、核心概念 認證中心 (Auth Center)&#xff1a;中央身份驗證服務令牌 (Token)&#xff1a;用戶身份憑…

《信息技術》科技核心期刊推薦

【科研必看】《信息技術》——科技核心期刊&#xff0c;助力你發表高影響力論文&#xff01; 如果你是一位科研工作者、學者或者在校學生&#xff0c;正在為發表論文而努力&#xff0c;那么《信息技術》期刊無疑是你不可錯過的選擇&#xff01;這本期刊以其卓越的學術影響力&am…

界面組件DevExpress WPF中文教程:Grid - 如何遍歷節點?

DevExpress WPF擁有120個控件和庫&#xff0c;將幫助您交付滿足甚至超出企業需求的高性能業務應用程序。通過DevExpress WPF能創建有著強大互動功能的XAML基礎應用程序&#xff0c;這些應用程序專注于當代客戶的需求和構建未來新一代支持觸摸的解決方案。 無論是Office辦公軟件…