首页 前端知识 【TypeScript进阶】映射对象类型篇(多实例)

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

2024-08-14 22:08:29 前端知识 前端哥 600 120 我要收藏

目录

    • 1、映射对象类型声明
    • 2、映射对象类型解析
    • 3、映射对象类型应用
      • 3.1 Pick用法与实现
      • 3.2 Omit用法及实现
      • 3.3 Partial用法与实现
      • 3.4 Required用法及实现
      • 3.5 Exclude用法及实现
      • 3.6 Record用法及实现
      • 3.7 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> => 
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15582.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!