前端笔记 - 【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'>;
相关推荐
pas1362 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
摇滚侠3 小时前
2 小时快速入门 ES6 基础视频教程
前端·ecmascript·es6
珑墨3 小时前
【Turbo】使用介绍
前端
军军君014 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
打小就很皮...5 小时前
Tesseract.js OCR 中文识别
前端·react.js·ocr
wuhen_n5 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon6 小时前
理解vue中的ref
前端·javascript·vue.js
落霞的思绪7 小时前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q7 小时前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz7 小时前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端