举例说明typescript的Exclude、Omit、Pick

这篇具有很好参考价值的文章主要介绍了举例说明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中对应属性名的属性值类型,并将它们作为新类型的属性值类型。文章来源地址https://www.toymoban.com/news/detail-626921.html

到了这里,关于举例说明typescript的Exclude、Omit、Pick的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端2023最全面试题(javaScript、typeScript、vue2、vue3、html、css、uniapp、webpack、vite、react)

    答案:JavaScript中的闭包是一种函数,它有权访问其词法环境的变量和其它函数。这意味着,即使其包含它的函数已经执行完毕,其词法环境仍然存在,因此可以访问其作用域内的变量。 答案:回调函数是在某个特定事件之后执行的函数。在JavaScript中,通常使用回调函数来处

    2024年02月06日
    浏览(65)
  • 举例说明什么是循环神经网络

    循环神经网络(Recurrent Neural Network, RNN)是一种处理时间序列数据和自然语言等具有顺序信息的数据的神经网络模型。与普通的前馈神经网络(Feedforward Neural Network)不同,RNN具有循环连接,使得网络能够在处理当前输入信息的同时保留之前输入的信息。 举一个简单的例子:

    2024年02月12日
    浏览(65)
  • 举例说明自然语言处理(NLP)技术

    自然语言处理(NLP)技术是一种人工智能领域的技术,用于处理自然语言文本或语音信号。下面是一些自然语言处理技术的例子: 机器翻译:机器翻译是一种自然语言处理的技术,它可以将一种语言的文本翻译成另一种语言的文本,如将英语翻译成中文。 命名实体识别:命

    2024年02月10日
    浏览(57)
  • 举例说明单层神经网络的工作原理

    假设我们有一个简单的单层神经网络,用于解决一个简单的问题:根据一个人的年龄(x)来预测其收入(y)。在这个例子中,输入数据只有一个特征(年龄),因此我们可以用一个一维输入向量x来表示。输出结果y也是一个一维向量。 单层神经网络的结构如下: 1. 输入层:

    2024年02月16日
    浏览(55)
  • Python面向对象编程详细解析(都带举例说明!)

    Python面向对象编程 (Object-Oriented Programming,简称OOP) 是一种编程范式,它将数据和操作数据的方法封装在一起,形成一个对象。 Python中的面向对象编程包括以下内容: 想找辣条哥的话直接戳这里,辣条之前的一些Python相关都可以拿走: 类是一种抽象的数据类型,它定义了

    2024年02月06日
    浏览(42)
  • 举例说明ChatGPT模型是怎么进行无监督学习的

    ChatGPT,也称为生成式预训练Transformer(GPT),是一种基于Transformer架构的自然语言处理模型。虽然在实际应用中,它主要用于有监督学习任务,但在训练初期,它会经历无监督学习阶段。以下是一个简化的例子,说明了ChatGPT是如何进行无监督学习的: 1. 预训练阶段:首先,在

    2024年02月12日
    浏览(32)
  • 说说Vue 3.0中Treeshaking特性?举例说明一下?

    Tree shaking  是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫  Dead code elimination 简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码 如果把代码打包比作制作蛋糕,传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(

    2024年03月09日
    浏览(61)
  • 阿里云服务器可以做什么?十大使用场景举例说明

    使用阿里云服务器可以做什么?阿里云百科分享使用阿里云服务器常用的十大使用场景,说是十大场景实际上用途有很多,阿里云百科分享常见的云服务器使用场景,如本地搭建ChatGPT、个人网站或博客、运维测试、学习Linux、跑Python、小程序服务器等等,阿小云分享使用阿里

    2024年02月10日
    浏览(57)
  • 举例说明计算机视觉(CV)技术的优势和挑战

    计算机视觉(CV)技术是指通过计算机算法和模型来解析和理解图像和视频的能力。它的优势和挑战如下所示: 优势: 高效精确:CV技术可以在很短的时间内对大量图像进行高质量的处理和分析,大大提高了处理速度和准确性。 自动化:CV技术可以在没有人工干预的情况下完

    2024年01月18日
    浏览(48)
  • [前端]浏览器警告:Failed to resolve component: xxxIf this is a native custom element, make sure to exclude

    如果你在做前端时,发现图表在浏览器显示时,浏览器控制台警告为: Failed to resolve component: xxx If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 中文翻译为: 未能解析组件:xxxx如果这是一个本地自定义的元素,请确保从组件解析

    2024年02月04日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包