前端笔记 - 【TypeScript】 - TS的内置泛型函数【Omit、Pick、Required、Partial】

前言

  • 大家可以结合下面的例子看;

  • 下面的代码就以类型 Person 为例:

    • 以下方式二选一即可;
    ts 复制代码
    type Person = {
        name: string;
        age: number;
        likes?: string[];
        gender: 0 | 1;
    };

一、Omit<T>

  • 作用

    • 一个类型 为 基础 ,支持 剔除 某些类型 ,然后 返回 一个 新类型
    • 简单来说就是,从现有的类型中剔除掉某些属性;
  • 注意

    • 如果想 剔除多个 ,可以使用 联合类型
  • 示例演示:

    ts 复制代码
    // Omit:从现有类型中,剔除某些类型
    
    type Person = {
      name: string;
      age: number;
      likes?: string[];
      gender: 0 | 1;
    };
    
    type OmitPerson = Omit<Person, 'age' | 'likes'>;

二、Pick<T>

  • 作用

    • 类型 的 属性中选取 指定一组 属性 ,然后 返回 一个 新类型
    • 简单来说就是,从现有的类型中,选取指定的类型;
  • 示例演示:

    ts 复制代码
    // Pick:从现有类型中,取出某些属性
    
    interface Person1 {
      name: string;
      age: number;
      likes?: Array<string>;
      gender: 0 | 1;
    }
    
    type PinkPerson1 = Pick<Person1, 'age' | 'name' | 'gender'>;

三、Required<T>

  • 作用

    • 把一个 对象的 属性 转换为 全部必选
  • 示例展示:

    ts 复制代码
    type Person2 = {
        city?: string;
        work?: string;
        salary?: string;
    };
    
    type NewPerson = Person & Person2;
    
    type RequiredPerson = Required<NewPerson>;
    • 得到的新类型 RequiredPerson

四、Partial<T>

  • 作用

    • 把一个 对象的 属性 转换为 全部可选
  • 示例展示:

    ts 复制代码
    // RequiredPerson类型 是 第三节得到的
    
    type PartialPerson = Partial<RequiredPerson>;
    • 得到的新类型 PartialPerson
相关推荐
下雪天的夏风3 分钟前
TS - tsconfig.json 和 tsconfig.node.json 的关系,如何在TS 中使用 JS 不报错
前端·javascript·typescript
青稞儿8 分钟前
面试题高频之token无感刷新(vue3+node.js)
vue.js·node.js
diygwcom14 分钟前
electron-updater实现electron全量版本更新
前端·javascript·electron
Hello-Mr.Wang31 分钟前
vue3中开发引导页的方法
开发语言·前端·javascript
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法,亲测有效!!!
前端·javascript·vue.js
编程零零七4 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
(⊙o⊙)~哦6 小时前
JavaScript substring() 方法
前端
无心使然云中漫步7 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者7 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_7 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js