举例说明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中对应属性名的属性值类型,并将它们作为新类型的属性值类型。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
TypeScript是由微软开发的一种开源编程语言,它是JavaScript的超集,拥有更加强大的类型系统和更好的开发工具支持。TypeScript编译器可以将TypeScript代码编译成纯JavaScript代码,从而可以在任何支持JavaScript的平台上运行。 TypeScript框架的最大优点是类型安全。JavaScript是一种弱类型语言,不需要声明变量的类型。这使得JavaScript非常灵活,但也容易出现类型错误,导致代码难以维护。TypeScript通过添加类型注释和类型检查,可以避免这些问题,并提供更好的代码智能感知和自动补全功能。 另一个重要的优点是更好的面向对象编程支持。TypeScript支持接口、类、抽象类、继承和多态等面向对象编程特性,这些特性在JavaScript中没有得到很好的支持。TypeScript还支持命名空间和模块化编程,可以更好地组织和管理代码。 TypeScript框架还提供了许多其他的高级特性,如装饰器、泛型、枚举和元组等,可以帮助开发人员编写更加高效和可维护的代码。 目前,TypeScript已经成为了一些流行框架的首选语言,如Angular、React和Vue等。这些框架提供了丰富的API和组件,可以帮助开发人员更加快速地构建复杂的Web应用程序。同时,TypeScript还可以与Node.js等服务器端技术结合使用,可以帮助开发人员编写高效的服务器端代码。 总之,TypeScript框架是一个非常强大和灵活的开发工具,可以帮助开发人员编写更加高效、可维护和类型安全的代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

韩小浪~~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值