快捷導(dǎo)航

TypeScript?中?omit?和?record?用法小結(jié)

更新時(shí)間：2026年05月27日 09:34:56 作者：AI?前端

TypeScript中Omit和Record工具類型可以組合使用實(shí)現(xiàn)靈活的類型操作,Record創(chuàng)建鍵為K、值為T的對(duì)象類型,Omit從T中移除指定鍵,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

基本概念

Record<K, T>：創(chuàng)建一個(gè)對(duì)象類型，其鍵為類型 K，值為類型 T。
例如：Record<'a' | 'b', string> 表示一個(gè)對(duì)象，鍵只能是 'a' 或 'b'，值必須是 string。
Omit<T, K>：從類型 T 中移除指定的鍵 K，返回一個(gè)新類型。
例如：Omit<{name: string; age: number}, 'age'> 得到 {name: string}。

Omit Record 的典型用法

當(dāng)你有一個(gè)基于 Record 定義的類型，并希望移除其中某些鍵時(shí)，就可以使用 Omit。

? 示例

// 定義一個(gè) Record 類型：用戶 ID 映射到用戶信息
type UserMap = Record<string, { id: number; name: string; password: string }>;

// 移除 password 字段，用于 API 響應(yīng)脫敏
type SafeUserMap = Record<string, Omit<UserMap[string], 'password'>>;

// 等價(jià)于：
// type SafeUserMap = Record<string, { id: number; name: string }>;

?? 解釋

UserMap[string] 提取 Record 的值類型，即 { id: number; name: string; password: string }。
Omit<UserMap[string], 'password'> 移除 password，得到 { id: number; name: string }。
外層再用 Record<string, ...> 包裹，保持鍵仍為 string 類型。

實(shí)際應(yīng)用場景

API 脫敏：從包含敏感字段（如密碼、token）的 Record 類型中移除特定字段。
狀態(tài)管理：在 Redux 或 Zustand 中，過濾掉不需要的屬性以減少狀態(tài)體積。
表單處理：提交表單時(shí)排除某些字段（如 createdAt、updatedAt）。

補(bǔ)充說明

Omit 從 TypeScript 3.5+ 開始支持，需確保 tsconfig.json 中 target ≥ ES2019。
若需選擇保留某些字段而非移除，可考慮使用 Pick。

如需進(jìn)一步了解工具類型對(duì)比，可參考：TypeScript 工具類型實(shí)戰(zhàn)指南。

到此這篇關(guān)于TypeScript 中 omit 和 record 用法的文章就介紹到這了,更多相關(guān)TypeScript omit record 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

js 將圖片連接轉(zhuǎn)換成base64格式的簡單實(shí)例
下面小編就為大家?guī)硪黄猨s 將圖片連接轉(zhuǎn)換成base64格式的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
Js制作簡單彈出層DIV在頁面居中中間顯示遮罩的具體方法
這篇文章介紹了Js制作簡單彈出層DIV在頁面居中中間顯示遮罩的具體方法，有需要的朋友可以參考一下
2013-08-08
csdn 博客中實(shí)現(xiàn)運(yùn)行代碼功能實(shí)現(xiàn)
有時(shí)候因?yàn)閏sdn的博客經(jīng)常處理一些字符，導(dǎo)致代碼很多情況下，都不能正常運(yùn)行，給大家的閱讀帶來了麻煩，下面是腳本之家編輯簡單的整理下。
2009-08-08
js 定位到某個(gè)錨點(diǎn)的方法
下面小編就為大家?guī)硪黄猨s 定位到某個(gè)錨點(diǎn)的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
Javascript實(shí)現(xiàn)的分頁函數(shù)
Javascript實(shí)現(xiàn)的分頁函數(shù)...
2007-02-02
uni-app使用微信小程序云函數(shù)的步驟示例
這篇文章主要介紹了uni-app使用微信小程序云函數(shù)的步驟示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
uniapp?APP消息推送方案實(shí)現(xiàn)全過程
前段時(shí)間開發(fā)app的時(shí)候要開始做消息推送功能了,下面這篇文章主要給大家介紹了關(guān)于uniapp?APP消息推送方案實(shí)現(xiàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-01-01
javascript克隆元素樣式的實(shí)現(xiàn)代碼
這是一個(gè)實(shí)驗(yàn)用的玩意，它可以克隆指定元素的最終樣式，并包裝成一個(gè)css類，它還可以證明Oprea 11.10 是個(gè)混球
2011-10-10
uniapp中使用vuex并持久化的方法示例
vuex是基于vuex.js的狀態(tài)管理工具,可以把它理解為一個(gè)倉庫,下面這篇文章主要給大家介紹了關(guān)于uniapp中如何使用vuex并持久化的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-06-06
JavaScript JSON數(shù)據(jù)處理全集(小結(jié))
這篇文章主要介紹了JavaScript JSON數(shù)據(jù)處理全集，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08