TypeScript 语言映射类型的使用

TypeScript^【1】映射类型^【2】：深入理解与实战应用

TypeScript 作为 JavaScript 的超集，提供了丰富的类型系统，使得开发者能够更早地发现潜在的错误，提高代码的可维护性和可读性。在 TypeScript 中，映射类型（Mapped Types）是一种强大的类型操作工具，它允许开发者根据现有类型创建新的类型。本文将深入探讨 TypeScript 映射类型的使用，包括其概念、语法、常用模式以及实战应用。

一、映射类型概述

1.1 什么是映射类型？

映射类型是 TypeScript 中的一种特殊类型，它允许开发者通过一定的规则从现有类型生成新的类型。映射类型通常用于创建泛型^【3】类型，使得类型可以根据输入类型动态变化。

1.2 映射类型的语法

映射类型的语法如下：

typescript T[K]

其中，`T` 是一个类型，`K` 是一个键，可以是字符串或数字。这个表达式表示从类型 `T` 中获取键 `K` 对应的类型。

二、常用映射类型

2.1 `Keyof^【4】` 映射类型

`Keyof` 映射类型用于获取一个对象类型的所有键。

typescript type Person = { name: string; age: number; };

type KeysOfPerson = keyof Person; // 'name' | 'age'

2.2 `Partial^【5】` 映射类型

`Partial` 映射类型用于将一个类型的所有属性转换为可选属性。

typescript type Person = { name: string; age: number; };

type PartialPerson = Partial; // { name?: string; age?: number; }

2.3 `Readonly^【6】` 映射类型

`Readonly` 映射类型用于将一个类型的所有属性转换为只读属性。

typescript type Person = { name: string; age: number; };

type ReadonlyPerson = Readonly; // { readonly name: string; readonly age: number; }

2.4 `Pick^【7】` 映射类型

`Pick` 映射类型用于从类型中选取一部分属性。

typescript type Person = { name: string; age: number; gender: string; };

type NameAndAge = Pick; // { name: string; age: number; }

2.5 `Record^【8】` 映射类型

`Record` 映射类型用于创建一个对象类型，其键来自一个类型，值来自另一个类型。

typescript type Person = { name: string; age: number; };

type PersonInfo = Record; // { name: string; age: string; }

2.6 `Omit^【9】` 映射类型

`Omit` 映射类型用于从类型中排除一部分属性。

typescript type Person = { name: string; age: number; gender: string; };

type NameAndGender = Omit; // { name: string; gender: string; }

三、映射类型的实战应用

3.1 创建一个通用的数据验证器

typescript type Validator = { [K in keyof T]: T[K] extends string ? string : never; };


type Person = {

  name: string;

  age: number;

  gender: string;

};

const person: Validator = { name: 'Alice', age: 25, gender: 'Female' };

3.2 实现一个自定义的 `Partial` 类型

typescript type MyPartial = { [P in keyof T]?: T[P]; };


type Person = {

  name: string;

  age: number;

};

const person: MyPartial = { name: 'Bob' };

3.3 使用映射类型实现一个类型安全^【10】的深拷贝^【11】函数

typescript type DeepCopy = { [P in keyof T]: T[P] extends Array ? Array<DeepCopy> : T[P] extends ReadonlyArray ? ReadonlyArray<DeepCopy> : T[P] extends object ? DeepCopy : T[P]; };


type Person = {

  name: string;

  age: number;

  children: Person[];

};
const person: Person = {

  name: 'Charlie',

  age: 30,

  children: [

    {

      name: 'David',

      age: 10,

      children: []

    }

  ]

};