TypeScript 中 omit 和 record 用法小结

 更新时间:2026年05月27日 09:34:56   作者:AI 前端  
TypeScript中Omit和Record工具类型可以组合使用实现灵活的类型操作,Record创建键为K、值为T的对象类型,Omit从T中移除指定键,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

在 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。

✅ 示例

// 定义一个 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 工具类型实战指南

到此这篇关于TypeScript 中 omit 和 record 用法的文章就介绍到这了,更多相关TypeScript omit record 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

    JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

    下面小编就为大家带来一篇JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS实现网页标题随机显示名人名言的方法

    JS实现网页标题随机显示名人名言的方法

    这篇文章主要介绍了JS实现网页标题随机显示名人名言的方法,涉及JavaScript中字符串、数组及随机数的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 加速IE的Javascript document输出的方法

    加速IE的Javascript document输出的方法

    加入这样的一行代码IE的document的访问速度至少可以提高5倍以上,对于页面使用document的朋友绝对是个好方法。
    2010-12-12
  • JavaScript高级程序设计 事件学习笔记

    JavaScript高级程序设计 事件学习笔记

    JavaScript高级程序设计 事件学习笔记,需要的朋友可以参考下。
    2011-09-09
  • js动态修改整个页面样式达到换肤效果

    js动态修改整个页面样式达到换肤效果

    这篇文章主要介绍了通过js动态修改整个页面样式达到换肤效果,需要的朋友可以参考下
    2014-05-05
  • JavaScript实现旋转轮播图

    JavaScript实现旋转轮播图

    这篇文章主要为大家详细介绍了JavaScript实现旋转轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 基于Bootstrap的UI扩展 StyleBootstrap

    基于Bootstrap的UI扩展 StyleBootstrap

    这篇文章主要为大家详细介绍了基于Bootstrap的UI扩展: StyleBootstrap,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • Javascript玩转继承(一)

    Javascript玩转继承(一)

    最近一直在学Javascript,打算写一些文章,算做自己的学习心得吧,也可以算是学习笔记。没有系统的知识点,太基础的不想写,主要是写一些自己觉得有价值的地方
    2014-05-05
  • js H5 canvas投篮小游戏

    js H5 canvas投篮小游戏

    这篇文章主要为大家详细介绍了JavaScript结合H5 canvas实现投篮小游戏的具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • JavaScript获取文本框内选中文本的方法

    JavaScript获取文本框内选中文本的方法

    这篇文章主要介绍了JavaScript获取文本框内选中文本的方法,实例分析了javascript通过onclick获取文本框选中文本的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02

最新评论