请解释 TypeScript 中的映射类型 (Mapped Types) 的概念和用法。如何使用映射类型转换已有的类型？

推荐答案

// www.javascriptcn.com code example
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

type Partial<T> = {
    [P in keyof T]?: T[P];
};

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

type ReadonlyPerson = Readonly<Person>;
type PartialPerson = Partial<Person>;

本题详细解读

映射类型的概念

映射类型（Mapped Types）是 TypeScript 中的一种高级类型，它允许你基于现有类型创建新的类型。通过映射类型，你可以遍历现有类型的属性，并对每个属性进行转换或修饰，从而生成一个新的类型。

映射类型的语法

映射类型的语法通常如下：

type NewType = {
    [P in keyof ExistingType]: Transformation;
};

• P in keyof ExistingType：遍历 ExistingType 的所有属性键。
• Transformation：对每个属性进行转换或修饰。

常见的映射类型

TypeScript 提供了一些内置的映射类型，如 Readonly、Partial、Record 等。

• Readonly<T>：将 T 的所有属性变为只读。
• Partial<T>：将 T 的所有属性变为可选的。
• Record<K, T>：创建一个对象类型，其属性键为 K，属性值为 T。

使用映射类型转换已有的类型

假设我们有一个 Person 类型：

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

我们可以使用映射类型来创建新的类型：

• 只读类型：使用 Readonly 映射类型将 Person 的所有属性变为只读。

type ReadonlyPerson = Readonly<Person>;
// 等同于
type ReadonlyPerson = {
    readonly name: string;
    readonly age: number;
};

• 可选类型：使用 Partial 映射类型将 Person 的所有属性变为可选的。

type PartialPerson = Partial<Person>;
// 等同于
type PartialPerson = {
    name?: string;
    age?: number;
};

自定义映射类型

你也可以创建自定义的映射类型。例如，创建一个将所有属性值变为 string 类型的映射类型：

// www.javascriptcn.com code example
type Stringify<T> = {
    [P in keyof T]: string;
};

type StringifiedPerson = Stringify<Person>;
// 等同于
type StringifiedPerson = {
    name: string;
    age: string;
};

通过映射类型，你可以灵活地操作和转换现有类型，生成符合需求的新类型。