前端笔记 - 【TypeScript】 - Omit类型 与 Pick类型

前言

  • Omit类型Pick类型TS内置类型

  • 注意

    • Omit类型Pick类型 都是 泛型
  • 大家看下面的例子一看就明白了👍👍👍;

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

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

一、Omit类型

  • 作用

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

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

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

二、Pick类型

  • 作用

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

    ts 复制代码
    // Pick:从现有类型中,取出某些属性
    
    interface Person1 {
      name: string;
      age: number;
      likes?: Array<string>;
      gender: 0 | 1;
    }
    
    type PinkPerson1 = Pick<Person1, 'age' | 'name' | 'gender'>;
相关推荐
清空mega13 分钟前
《Vue Router 与 Pinia 入门:页面跳转、动态路由、全局状态管理一篇打通》
前端·javascript·vue.js
踩着两条虫14 分钟前
AI 驱动的 Vue3 应用开发平台 深入探究(十):物料系统之内置组件库
前端·vue.js
坚持学习前端日记1 小时前
AI 产品开发经验
前端·javascript·人工智能·visual studio
张一凡931 小时前
easy-model:简化领域驱动开发的理想选择
前端·react.js
雾削木1 小时前
STM32输入捕获测量PWM频率占空比
前端·javascript·stm32
weixin199701080161 小时前
淘宝客商品详情页前端性能优化实战
java·前端·python·性能优化
JamesYoung79711 小时前
第八部分 — UI 表面 动作(工具栏)、徽标、弹出窗口
前端·javascript
Joker Zxc1 小时前
【前端基础(Javascript部分)】5、JavaScript的循环语句
开发语言·前端·javascript
Neweee2 小时前
JavaScript进阶内容详解
前端