前端笔记 - 【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'>;
相关推荐
萌萌哒草头将军5 分钟前
🚀🚀🚀尤雨溪推荐的这个库你一定要知道!轻量⚡️,优雅!
前端·vue.js·react.js
三门18 分钟前
docker安装mysql8.0.20过程
前端
BillKu1 小时前
Vue3 + Vite 中使用 Lodash-es 的防抖 debounce 详解
前端·javascript·vue.js
一只小风华~1 小时前
HTML前端开发:JavaScript的条分支语句if,Switch
前端·javascript·html5
橙子家1 小时前
Select 组件实现【全选】(基于 Element)
前端
超级土豆粉1 小时前
HTML 语义化
前端·html
bingbingyihao1 小时前
UI框架-通知组件
前端·javascript·vue
wordbaby1 小时前
React Router 预渲染的工作原理和价值(Pre-rendering)
前端·react.js
chengchong_cc1 小时前
海康对接摄像头
java·vue.js
依旧天真无邪2 小时前
Chrome 优质插件计划
前端·chrome