TypeScript 中 omit 和 record 用法

在 TypeScript 中,Omit 和 Record 是两个内置的高级工具类型,它们可以组合使用,以实现更灵活的类型操作。


基本概念

  • Record<K, T>:创建一个对象类型,其键为类型 K,值为类型 T。

    例如:Record<'a' | 'b', string> 表示一个对象,键只能是 'a' 或 'b',值必须是 string。

  • Omit<T, K>:从类型 T 中移除指定的键 K,返回一个新类型。

    例如:Omit<{name: string; age: number}, 'age'> 得到 {name: string}。


Omit Record 的典型用法

当你有一个基于 Record 定义的类型,并希望移除其中某些键时,就可以使用 Omit。

✅ 示例

ts 复制代码
// 定义一个 Record 类型:用户 ID 映射到用户信息
type UserMap = Record<string, { id: number; name: string; password: string }>;

// 移除 password 字段,用于 API 响应脱敏
type SafeUserMap = Record<string, Omit<UserMap[string], 'password'>>;

// 等价于:
// 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 类型。

实际应用场景

  • API 脱敏:从包含敏感字段(如密码、token)的 Record 类型中移除特定字段。
  • 状态管理:在 Redux 或 Zustand 中,过滤掉不需要的属性以减少状态体积。
  • 表单处理:提交表单时排除某些字段(如 createdAt、updatedAt)。

补充说明

  • Omit 从 TypeScript 3.5+ 开始支持,需确保 tsconfig.json 中 target ≥ ES2019。
  • 若需选择保留某些字段而非移除,可考虑使用 Pick。

如需进一步了解工具类型对比,可参考:TypeScript 工具类型实战指南。

相关推荐
小码哥_常13 小时前
一套自己部署的 IM,客户端是同一份 Flutter
前端·后端
蜗牛攻城狮15 小时前
微前端四大方案选型对比与最佳实践:qiankun、micro-app、wujie、Module Federation
前端·微前端·qiankun·前端架构·micro-app·wujie
她说可以呀16 小时前
Vue插槽
前端·javascript·vue.js
qq_4480111616 小时前
Vue + Jinja2两套模版与法冲突造成undefinedError
前端·javascript·vue.js
aixingpan17 小时前
aixingpan.cn API开发文档:前端查询夏令时和时区接口指南
前端·php
2601_9583529017 小时前
23.5×19mm 换掉一整条音频链?|A-68 集成了什么:ADC / DAC / 24.576MHz 时钟 / AEC / 波束降噪,主控仅需 6 根线
前端·音视频·ai降噪·回声消除·语音模块
志尊宝18 小时前
AI原生前端开发(039):AI辅助的Nuxt 4全栈开发
前端·vue.js·ai-native
FRing0319 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
excel19 小时前
双 Token 与前端使用 Crypto 公私钥鉴权换 Token,哪种方案更好?
前端·后端
外收内放19 小时前
Python基础语法练习题(73)
java·前端·python