前端笔记 - 【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'>;
相关推荐
xiaoyustudiowww1 分钟前
fetch异步简单版本(Tomcat 9)
java·前端·tomcat
TOPGUS2 分钟前
谷歌Chrome浏览器即将对HTTP网站设卡:突出展示“始终使用安全连接”功能
前端·网络·chrome·http·搜索引擎·seo·数字营销
C_心欲无痕8 分钟前
ts - 模板字面量类型与 `keyof` 的魔法组合:`keyof T & `on${string}`使用
linux·运维·开发语言·前端·ubuntu·typescript
一勺菠萝丶14 分钟前
Java 后端想学 Vue,又想写浏览器插件?
java·前端·vue.js
@PHARAOH19 分钟前
HOW - 如何禁用 localstorage
前端·状态模式
霍理迪19 分钟前
CSS布局方式——弹性盒子(flex)
前端·css
Irene199120 分钟前
Vue 3中:setup 函数接收两个重要参数:props 和 context(附:setup 中无法访问 this 详解)
vue.js·setup
念你那丝微笑26 分钟前
uView Plus + Vue3 + TypeScript + UniApp 正确引入 UnoCSS(避坑版)
vue.js·typescript·uni-app
内存不泄露29 分钟前
基于Spring Boot和Vue的宠物医院管理系统设计与实现
vue.js·spring boot·信息可视化
xkxnq38 分钟前
第一阶段:Vue 基础入门(第 14天)
前端·javascript·vue.js