前端笔记 - 【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 分钟前
迭代器和生成器
前端·javascript
拳打南山敬老院4 分钟前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰4 分钟前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区5 分钟前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶11111 分钟前
web服务代理用它,还不够吗?
前端
Liamhuo1 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_1 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生1 小时前
React 组件渲染
前端·react.js
奔跑的蜗牛ing1 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
sjd_积跬步至千里1 小时前
CSS实现文字横向无限滚动效果
前端