为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第3天 TypeScript学习 9-26章

课程名称: 晋级TypeScript高手,成为抢手的前端开发人才

课程章节: 9-26 【高级类型 Omit] 分解掌握Omit

课程讲师: keviny79

课程内容:
本章节主要讲解 TypeScript高级类型Omit

Omit

Omit 反向抓取属性数据,剔除不需要的属性,保留需要的属性。
Omit 使用 两个 Ts高级类型 Pick 和 Exclude

语法:

type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>

解析:

  1. Exclude<keyof T, K> ,K的联合类型 有在 T联合类型 中出现就剔除,保留没有在 K 中出现的类型,如下
    // 传递联合类型
    type Exclude<T, K> = T extends K ? never : T
    type ListType = {
    	name: string,
    	age: number,
    	list: Array<string>,
    	size: number
    }
    // keyof ListType 提取 ListType的key值,变为联合类型
    // "name" | "age" | "list" | "size"
    // 剔除 提取后的联合类型 中的 "name" | "list" 
    // 结果一个联合类型 "age" | "size"
    type test = Exclude<keyof ListType, "name" | "list">
    
  2. Pick<T, Exclude<keyof T, K>>,抓取 T 对象类型中 Exclude 返回的联合类型,如:
    // 这里为了直观对Pick和Exclude进行分离
    type Exclude<T, K> = T extends K ? never : T
    
    type Pick<T, K> = {
    	[P in keyof K]: T[P]
    }
    
    type ListType = {
    	name: string,
    	age: number,
    	list: Array<string>,
    	size: number
    }
    // 1. 剔除 ListType 中 list 和 age
    // 得到 "name" | "size" | "age" 联合类型
    type ExcludeType = Exclude<keyof ListType, "list">
    
    // 2. 抓取 ListType 中 "name"、"size" 后组合新的对象类型
    // 得到{name: string,size: number, age: number,}
    type PickType = Pick<ListType, ExcludeType>
    
  3. 最后看type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>,就可以清楚的明白 T表示传递的对象类型,K表示传递必须是T对象中属性。返回对象,对象中的属性就是剔除了 T 中有 K 的属性。列:
    type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>
    
    type ListType = {
    	name: string,
    	age: number,
    	list: Array<string>,
    	size: number
    }
    // 不需要 ListType 中 list 变量,就可以这样做
    // {
    // name: string;
    // age: number;
    // size: number;
    // }
    type OmitListType = Omit<ListType, "list">
    

使用场景:
用于一个对象属性中有很多属性,但需要去掉其中两三个不用的,有不想再声明一个类型,一个一个再添加需要的对象属性时,就可以使用Omit。

课程收获:
本节了解了 Omit 高级类型是 Pick 和 Exclude 的组合使用,对Pick 和 Exclude 有了更深刻的理解

图片描述

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
10
获赞与收藏
5

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消