【TypeScript进阶】映射对象类型篇(多实例)

本文深入探讨了TypeScript的映射对象类型,包括如何声明、解析和应用映射类型。通过示例介绍了Pick、Omit、Partial、Required、Exclude、Record和Readonly等实用工具类型,展示了它们在处理对象属性时的灵活性和便利性。

TypeScript映射对象类型是一种高级类型,允许您定义一种新类型,该类型是从现有类型派生的,并且对现有类型的每个属性进行修改。 映射类型可以帮助您在编写TypeScript代码时减少代码的冗余,并简化某些常见任务。

1、映射对象类型声明

在TypeScript中,映射类型可以使用索引类型和条件类型一起创建,以便将一个类型中的每个属性映射到另一个类型。 映射类型的语法如下:

type NewType = {
   
    [P in keyof OldType]: NewValueType }

其中
OldType 是要映射的类型,
NewValueType 是要将每个属性映射到的新类型,
keyof 操作符用于获取现有类型的所有属性名称,
in 关键字后面的方括号中,我们将属性名称 Pkeyof OldType 进行匹配,并将其重新映射为新类型 NewValueType

2、映射对象类型解析

以下是一个简单的示例,其中我们将具有字符串值的现有类型的每个属性映射到具有数字值的新类型:

type OldType = {
   
    a: string, b: string, c: string };
type NewType = {
   
    [P in keyof OldType]: number };

// 新类型为 { a: number, b: number, c: number }

映射类型还支持循环类型,您可以使用 keyof 操作符和条件类型来定义更复杂的映射类型。例如,以下示例将一个具有字符串值的对象的所有属性映射到一个具有相应数组类型的新类型:

type ObjectWithStringValues = {
   
    [key: string]: string };
type ObjectWithArrayValues = {
   
    [P in keyof ObjectWithStringValues]: string[] };

// 新类型为 { [key: string]: string[] }

下面是它的详细运算步骤:

首先,keyof OldType 获取旧类型 OldType 的所有属性名称,并返回一个联合类型。

然后,in 关键字与方括号中的属性名称 P 进行匹配。在这里,我们使用 P 来表示 OldType 中的每个属性名称。

P 作为索引键,在方括号中出现,并且在冒号后面跟着新类型 NewValueType,指定要将每个属性映射到的新类型。

最后,将所有属性名称 P 替换为新类型 NewValueType,并将它们组合在一起以形成新的映射类型。

3、映射对象类型应用

映射对象类型是 TypeScript 的一项强大功能,可以让您更轻松地处理各种常见的编程任务。下面是一些映射对象类型的应用:

3.1 Pick用法与实现

如果您有一个对象类型,但想从中删除一些属性,可以使用 Pick 和 TypeScript 中的映射类型来实现。

在这个示例中,我们使用自定义的 Pick 实现来创建一个新类型 PersonInfo,该类型只包含 Person 接口中的 nameage 属性。最后,我们创建一个 person 对象,它只包含 PersonInfo 中指定的这两个属性。

interface Person {
   
   
  name: string;
  age: number;
  address: string;
  phone: string;
}

type PersonInfo = Pick<Person, 'name' | 'age'>;

const person: PersonInfo = {
   
   
  name: 'Alice',
  age: 30,
};

下面是一个简单的 TypeScript 实现 Pick 的示例:

type Pick<SourceType, KeysType extends keyof SourceType> = {
   
   
  [KeyType in KeysType]: SourceType[KeyType];
};

在这个实现中,我们使用了两个泛型类型参数:

  • SourceType 表示要选择属性的源类型。
  • KeysType 是一个字符串字面量类型的联合类型,它表示要从源类型中选择的属性名称。
  • 接下来,我们使用TypeScript中的 in 关键字来迭代 KeysType 中的每个属性名称,并使用 [ ] 访问运算符从 SourceType 中提取出相应的属性类型。
  • 最后,我们使用 TypeScript 中的映射类型语法来创建一个新的类型,该类型只包含 KeysType 中指定的属性。

3.2 Omit用法及实现

可以从一个类型中省略指定的属性。它可以非常方便地快速生成一个新的类型,去掉原来类型中的一些属性。

下面是一个示例,使用 Omit 实现一个可以从对象中省略指定属性的函数:

const omit = <T, K extends keyof T>(obj: T, ...keys: K[]): Omit <T, K> => {
   
   
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

jierm

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

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

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

打赏作者

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

抵扣说明:

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

余额充值