举例说明typescript的Exclude、Omit、Pick

一、提前知识说明:联合类型

typescript的联合类型是一种用于表示一个值可以是多种类型中的一种的类型。我们使用竖线(|)来分隔每个类型,所以number | string | boolean是一个可以是number,string或boolean的值的类型。

联合类型可以用于模拟一些值可能有重叠类型的情况。例如,假设我们有一个函数,它可以接受一个数字或一个字符串作为参数。我们可以使用联合类型来定义这个函数的参数类型:

function print(value: number | string) {console.log(value);
}print(1); // OK
print("hello"); // OK
print(true); // Error

如果我们有一个联合类型的值,我们只能访问所有类型共有的成员。https://www.typescriptlang.org/docs/handbook/unions-and-intersections.html?ref=hackernoon.com 例如,假设我们有一个Fish和Bird两个接口,它们都有layEggs方法,但只有Fish有swim方法,只有Bird有fly方法。我们可以定义一个返回Fish或Bird的函数:

interface Fish {swim(): void;layEggs(): void;
}interface Bird {fly(): void;layEggs(): void;
}declare function getSmallPet(): Fish | Bird;

然后,我们可以调用这个函数,并访问返回值的layEggs方法,因为它是Fish和Bird共有的:

let pet = getSmallPet();
pet.layEggs(); // OK

但是,我们不能访问返回值的swim或fly方法,因为它们不是Fish和Bird共有的:

let pet = getSmallPet();
pet.swim(); // Error
pet.fly(); // Error

要想访问这些方法,我们需要使用类型断言或者类型守卫来缩小联合类型的范围。 例如:

let pet = getSmallPet();// 使用类型断言
if ((pet as Fish).swim) {(pet as Fish).swim();
} else if ((pet as Bird).fly) {(pet as Bird).fly();
}// 使用类型守卫
function isFish(pet: Fish | Bird): pet is Fish {return (pet as Fish).swim !== undefined;
}if (isFish(pet)) {pet.swim();
} else {pet.fly();
}

二、Exclude

typescript的Exclude是一个内置的工具类型,用于从一个联合类型中排除一些指定的类型,从而创建一个新的联合类型。https://www.typescriptlang.org/tsconfig/exclude.html 它的语法是:

Exclude<Type, ExcludedUnion>

其中,Type是一个联合类型,ExcludedUnion是一个要排除的类型或者它们的联合类型,表示要从Type中排除的类型。

例如,假设我们有一个Shape类型,它定义了几种形状:

type Shape = "circle" | "square" | "triangle" | "rectangle";

如果我们想要创建一个不包含circle和square的新类型,我们可以使用Exclude来实现:

type ShapeWithoutCircleAndSquare = Exclude<Shape, "circle" | "square">;

这样,ShapeWithoutCircleAndSquare类型就相当于:

type ShapeWithoutCircleAndSquare = "triangle" | "rectangle";

Exclude的实现原理是基于条件类型。条件类型可以根据一个条件表达式,选择两个可能的类型中的一个。Exclude的源码如下:

type Exclude<T, U> = T extends U ? never : T;

这里,T是联合类型,U是要排除的类型。首先,T extends U检查了T是否可以赋值给U,如果可以,则返回never类型,表示排除掉T;如果不可以,则返回T本身,表示保留T。然后,这个条件类型会分布地应用到T中的每个成员上,并组合成一个新的联合类型。

三、Omit

typescript的Omit是一个内置的工具类型,用于从一个对象类型中排除一些指定的属性,从而创建一个新的对象类型。它的语法是:

Omit<Type, Keys>

其中,Type是一个对象类型,Keys是一个字符串字面量类型或者它们的联合类型,表示要从Type中排除的属性名。

例如,假设我们有一个User类型,它定义了用户的一些信息:

type User = {name: string;age: number;email: string;address: string;
};

如果我们想要创建一个不包含email和address属性的新类型,我们可以使用Omit来实现:

type UserWithoutEmailAndAddress = Omit<User, "email" | "address">;

这样,UserWithoutEmailAndAddress类型就相当于:

type UserWithoutEmailAndAddress = {name: string;age: number;
};

Omit的实现原理是基于Pick和Exclude两个工具类型。Pick用于从一个对象类型中选择一些指定的属性,Exclude用于从一个联合类型中排除一些指定的类型。Omit的源码如下:

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

这里,T是对象类型,K是要排除的属性名。首先,keyof T得到T的所有属性名组成的联合类型,然后Exclude<keyof T, K>排除掉K中指定的属性名,得到剩余的属性名组成的联合类型。最后,Pick<T, Exclude<keyof T, K>>从T中选择剩余的属性名对应的属性,得到新的对象类型。

四、pick

typescript的Pick是一个内置的工具类型,用于从一个对象类型中选择一些指定的属性,从而创建一个新的对象类型。https://www.typescriptlang.org/docs/handbook/utility-types.html 它的语法是:

Pick<Type, Keys>

其中,Type是一个对象类型,Keys是一个字符串字面量类型或者它们的联合类型,表示要从Type中选择的属性名。https://www.typescriptlang.org/docs/handbook/utility-types.html

例如,假设我们有一个Todo类型,它定义了一个待办事项的信息:

type Todo = {title: string;description: string;completed: boolean;
};

如果我们想要创建一个只包含title和completed属性的新类型,我们可以使用Pick来实现:

type TodoPreview = Pick<Todo, "title" | "completed">;

这样,TodoPreview类型就相当于:

type TodoPreview = {title: string;completed: boolean;
};

Pick的实现原理是基于映射类型。映射类型可以根据一个已有的类型,通过遍历它的属性,生成一个新的类型。https://ultimatecourses.com/blog/using-typescript-pick-mapped-type Pick的源码如下:

type Pick<T, K extends keyof T> = {[P in K]: T[P];
};

这里,T是对象类型,K是要选择的属性名。首先,keyof T得到T的所有属性名组成的联合类型,然后K extends keyof T约束了K必须是T的属性名之一。接着,[P in K]遍历了K中的每个属性名,并将它们作为新类型的属性名。最后,T[P]得到了T中对应属性名的属性值类型,并将它们作为新类型的属性值类型。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/30554.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

logstash 采集 docker 日志

1、nginx容器部署 参考&#xff1a;nginx容器部署 将容器内的nginx日志文件映射到宿主机/home/logs/nginx目录下 注意&#xff1a;并且需要需要将日志的输出格式修改为json 2、编辑vim /opt/logstash-7.4.2/config/nginx-log-es.conf 文件&#xff0c;收集docker nginx容器日…

Java训练五

一、跳动的心脏 心脏是动物的重要器官&#xff0c;不断跳动的心脏意味着鲜活的生命力。现在创建一个人类&#xff0c;把心脏类设计为人类里面的一个成员内部类。心脏类有一个跳动的方法&#xff0c;在一个人被创建时&#xff0c;心脏就开始不断地跳动。 package haha; publi…

Spring集成Seata

Seata的集成方式有&#xff1a; 1. Seata-All 2. Seata-Spring-Boot-Starter 3. Spring-Cloud-Starter-Seata 本案例使用Seata-All演示&#xff1a; 第一步&#xff1a;下载Seata 第二步&#xff1a;为了更好看到效果&#xff0c;我们将Seata的数据存储改为db 将seata\sc…

symfony3.4中根据角色不同跳转不同页面

在Symfony 3.4中&#xff0c;可以使用安全组件来实现控制不同角色跳转到不同页面的功能。 首先&#xff0c;确保你已经安装了Symfony的安全组件&#xff0c;并配置了安全相关的配置文件。这些文件通常是 security.yml 和 security.yml。 在配置文件中&#xff0c;你可以定义不…

Vue3 —— to 全家桶及源码学习

该文章是在学习 小满vue3 课程的随堂记录示例均采用 <script setup>&#xff0c;且包含 typescript 的基础用法 前言 本篇主要学习几个 api 及相关源码&#xff1a; toReftoRefstoRaw 一、toRef toRef(reactiveObj, key) 接收两个参数&#xff0c;第一个是 响应式对象…

目标检测中遇到的问题和 docker导出日志

一 docker容器导出日志 导出日志在Linux服务器的本地目录下&#xff0c;可以直接下载 docker logs 容器名称 > log.txt 二 Flask使用main执行 1 改dockerfile 文件内容 #CMD [ "python3", "-m" , "flask", "run", "--hos…

使用阿里云微调chatglm2

完整的代码可以参考&#xff1a;https://files.cnblogs.com/files/lijiale/chatglm2-6b.zip?t1691571940&downloadtrue # %% [markdown] # # 微调前# %% model_path "/mnt/workspace/ChatGLM2-6B/chatglm2-6b"from transformers import AutoTokenizer, AutoMo…

Elasticsearch 性能调优指南

目录 1、通用优化策略 1.1 通用最小化法则 1.2 职责单一原则 1.3 其他 2、写性能调优 2.1 基本原则 2.2 优化手段 2.2.1 增加 flush 时间间隔&#xff0c; 2.2.2 增加refresh_interval的参数值 2.2.3 增加Buffer大小&#xff0c; 2.2.4 关闭副本 2.2.5 禁用swap 2…

嘉楠勘智k230开发板上手记录(四)--HHB神经网络模型部署工具

按照K230_AI实战_HHB神经网络模型部署工具.md&#xff0c;HHB文档&#xff0c;RISC-V 编译器和模拟器安装来 一、环境 1. 拉取docker 镜像然后创建docker容器并进入容器 docker pull hhb4tools/hhb:2.4.5 docker run -itd --namehhb2_4 -p 22 "hhb4tools/hhb:2.4.5"…

【CSS】背景图定位问题适配不同机型

需求 如图, 实现一个带有飘带的渐变背景 其中头像必须显示飘带凹下去那里 , 需要适配不同的机型, 一不下心容易错位 实现 因为飘带背景是版本迭代中更新的, 所以飘带和渐变背景实则两个div 飘带切图如下 , 圆形部分需要契合头像 <view class"box-bg"><…

Linux ——实操篇

Linux ——实操篇 前言vi 和 vim 的基本介绍vi和vim常用的三种模式正常模式插入模式命令行模式 vi和vim基本使用各种模式的相互切换vi和vim快捷键关机&重启命令基本介绍注意细节 用户登录和注销基本介绍使用细节 用户管理基本介绍添加用户基本语法应用案例细节说明 指定/修…

Java基础(九)数组工具类

数组工具类 1. Arrays类 a. 导入方法 import java.util.Arrays;b. Arrays类常用的方法 方法返回类型说明equals(array1, array2)boolean比较两个数组是否相等sort(array)void对数组 array 的元素进行排序toString(array)String把一个数组 array 转换成一个字符串fill(array,…

获取接口的所有实现

一、获取接口所有实现类 方法1&#xff1a;JDK自带的ServiceLoader实现 ServiceLoader是JDK自带的一个类加载器&#xff0c;位于java.util包当中&#xff0c;作为 A simple service-provider loading facility。 &#xff08;1&#xff09;创建接口 package com.example.dem…

ArcGIS API for JavaScript 4.x 教程(四) 添加点、线和多边形

了解如何在地图中显示点、线和多边形图形。 图形是用于在地图或场景中显示点、线、多边形和文本的视觉元素。图形由几何图形、符号和属性组成&#xff0c;单击时可以显示弹出窗口。您通常使用图形来显示未连接到数据库&#xff08;即GPS位置&#xff09;的地理数据。 在本教程…

Springboot中拦截GET请求获取请求参数验证合法性

目录 目的 核心方法 完整代码 创建拦截器 注册拦截器 测试效果 目的 在Springboot中创建拦截器拦截所有GET类型请求&#xff0c;获取请求参数验证内容合法性防止SQL注入&#xff08;该方法仅适用拦截GET类型请求&#xff0c;POST类型请求参数是在body中&#xff0c;所以下面…

K8S资源管理方式

K8S资源管理方式 文章目录 K8S资源管理方式一、陈述式资源管理1.基础命令操作2.创建pod3.查看资源状态4.查看pod中的容器日志5.进入pod中的容器6.删除pod资源7.pod扩容8.项目生命周期管理&#xff08;创建-->发布-->更新-->回滚-->删除&#xff09;8.1创建services…

3.1 计算机网络和网络设备

数据参考&#xff1a;CISP官方 目录 计算机网络基础网络互联设备网络传输介质 一、计算机网络基础 1、ENIAC&#xff1a;世界上第一台计算机的诞生 1946年2月14日&#xff0c;宾夕法尼亚大学诞生了世界上第一台计算机&#xff0c;名为电子数字积分计算机&#xff08;ENIAC…

准确率、召回率和F1数值区别

目录 准确率、召回率和F1数值 准确率、召回率和F1数值 一、准确率与召回率(Precision & Recall) 准确率和召回率是广泛用于信息检索和统计学分类领域的两个度量值,用来评价结果的质量。 其中精度是检索出相关文档数与检索出的文档总数的比率,衡量的是检索系统的查准…

【Autolayout案例02-距离四周边距 Objective-C语言】

一、好,来看第二个案例 1.第二个案例,是什么意思呢,第二个案例,要求屏幕中间,有一个UIView UIView,是个红色的UIView UIView的大小,我不限定 但是无论你是什么屏幕下 这个UIView距离上边,始终是50 距离右边,始终是50, 距离下边,始终是50, 距离左边,始终是5…

Nginx跳转模块——location与rewrite

一、location 1、location作用 用于匹配uri&#xff08;文件、图片、视频&#xff09; uri&#xff1a;统一资源标识符。是一种字符串标识&#xff0c;用于标识抽象的或物理资源文件、图片、视频 2、locatin分类 1、精准匹配&#xff1a;location / {...} 2、一般匹配&a…