IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> TS学习笔记:Omit减少重复的类型定义 -> 正文阅读

[JavaScript知识库]TS学习笔记:Omit减少重复的类型定义

恰巧在B站刷短视频,看到了这个教程。想了想还是蛮有用的,记录一下

假设现在要从服务器获取用户信息,需要定义一个 User 类型,也许会这样来进行处理:


这里面的 id、createAt 和 updateAt 都是创建用户时由服务端产生的。

因此,在注册用户时不需要前端传递这些属性,而只需要传 name 和 password 即可:


那么问题来了,要怎么高效复用已定义好的 User 类型,来产生一个 RegisterUser 呢?

Omit

为了解决前面场景里提到的问题,可以使用TypeScript 内置的工具类型 Omit,具体用法如:


可以看到 id、createAt 和 updateAt 几个属性已经被过滤掉。

所以,使用 Omit 工具类型,可以很方便地过滤掉对象类型中不需要的属性。

需要注意的是这里传入需要过滤的属性是联合类型(当然也可以传单个字符串字面量类型)

内部实现:

首先 Omit 是一个泛型,接收了 T 和 K 两个类型参数
K extends 这里,使用了泛型约束
keyof 可以获取到对象类型的 key 组成的联合类型,keyof any 返回的也是联合类型 string | number | symbol
接着看到使用了 Pick 和 Exclude 两个内置工具类型
Exclude 工具类型为 type Exclude<T, U> = T extends U ? never : T,可以从 keyof User 返回的联合类型中过滤掉要排除的属性,返回的是联合类型
Pick 工具类型 type Pick<T, K extends keyof T> = { [P in K]: T[P]; },可以从 User 对象类型中取出需要保留的属性,形成新的对象类型?

Omit 和 Pick 两个工具类型的效果是互补的:?

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-20 22:57:21  更:2022-06-20 22:59:16 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 16:33:06-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码