TypeScript高级类型

news2025/1/19 19:38:42

🎬 岸边的风：个人主页

🔥 个人专栏 :《 VUE 》《 javaScript 》

⛺️ 生活的理想，就是为了理想的生活 !

在这里插入图片描述

映射类型（Mapped Types）

1. Readonly

2. Partial

3. Pick

4. Record

条件类型（Conditional Types）

条件类型与infer

模板字面量类型（Template Literal Types）

映射类型（Mapped Types）

映射类型（Mapped Types）是 TypeScript 中一种强大的类型操作工具，它允许我们在编译时转换已知类型的属性，并创建一个新的类型。通过映射类型，我们可以对已有类型的属性进行转换、修改或添加新的属性。这在许多情况下都非常有用，例如将属性变为只读或可选，从现有属性中选择一部分属性等。

映射类型的语法形式为：

type NewType = {
  [Property in keyof ExistingType]: TransformType;
};

其中，NewType 是我们要创建的新类型，Property 是 ExistingType 的键，TransformType 是对应属性的转换类型。

下面是一些常见的映射类型的示例：

1. Readonly

Readonly 是 TypeScript 内置的一个映射类型，它将给定类型的所有属性变为只读。

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

示例使用：

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

type ReadonlyPerson = Readonly<Person>;

const person: ReadonlyPerson = {
  name: "John",
  age: 30,
};

person.name = "Alice";  // Error: Cannot assign to 'name' because it is a read-only property.

2. Partial

Partial 是另一个内置的映射类型，它将给定类型的所有属性变为可选。

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

示例使用：

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

type PartialPerson = Partial<Person>;

const person: PartialPerson = {
  name: "John",
};

person.age = 30;  // Valid: age is optional

3. Pick

Pick 是一个映射类型，它从给定类型中选择一部分属性来创建新类型。

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

示例使用：

interface Person {
  name: string;
  age: number;
  occupation: string;
}

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

const info: PersonInfo = {
  name: "John",
  age: 30,
};

4. Record

Record 是一个映射类型，它根据指定的键类型和值类型创建一个新的对象类型。

type Record<K extends keyof any, T> = {
  [P in K]: T;
};

示例使用：

type Weekday = "Monday" | "Tuesday" | "Wednesday" | "Thursday" | "Friday";

type WorkingHours = Record<Weekday, string>;

const hours: WorkingHours = {
  Monday: "9am-6pm",
  Tuesday: "9am-6pm",
  Wednesday: "9am-6pm",
  Thursday: "9am-6pm",
  Friday: "9am-5pm",
};

条件类型（Conditional Types）

它允许我们根据类型的条件判断结果来选择不同的类型。条件类型的语法形式为：

T extends U ? X : Y

其中，T 是待检查的类型，U 是条件类型，X 是满足条件时返回的类型，Y 是不满足条件时返回的类型。条件类型通常与泛型一起使用，以便根据不同的类型参数值进行类型推断和转换。

条件类型与infer

当我们在 TypeScript 中使用条件类型时，有时候我们希望从某个类型中提取出一个部分类型并进行推断。这时就可以使用infer关键字。

infer关键字用于声明一个类型变量，在条件类型中表示待推断的部分类型。它通常在条件类型的分支中使用，以便从给定类型中提取和推断出某些信息。

下面是一个示例，展示了如何使用infer关键字：

type ReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function add(a: number, b: number): number {
  return a + b;
}

type AddReturnValue = ReturnType<typeof add>;  // 推断为number类型

在上面的示例中，我们定义了一个条件类型ReturnType<T>，它接受一个函数类型T作为输入。当T是一个函数类型时，我们使用infer R声明一个类型变量R来推断函数的返回类型，并将其作为结果返回。

通过调用ReturnType<typeof add>，我们将函数add的类型传递给ReturnType<T>，从而提取并推断出其返回类型。结果AddReturnValue的类型被推断为number，因为add函数返回一个数字。

infer关键字的作用是告诉 TypeScript 编译器在条件类型中推断一个待定的类型，并将其赋值给声明的类型变量。这使得我们可以在条件类型中使用这个推断出的类型进行进一步的类型操作。

需要注意的是，infer关键字只能在条件类型的右侧使用，用于声明一个待推断的类型变量，而不能在其他地方使用。此外，每个条件类型只能使用一次infer关键字，并且通常与泛型一起使用。

infer关键字是 TypeScript 中用于提取并推断待定类型的工具。它允许我们在条件类型中声明一个类型变量，用于在类型推断过程中捕获和使用待推断的类型，从而使类型系统更加灵活和强大。

模板字面量类型（Template Literal Types）

模板字面量类型（Template Literal Types）是 TypeScript 4.1 引入的新特性，它允许我们在类型级别上操作字符串字面量类型。通过使用模板字面量类型，我们可以创建基于字符串模板的复杂类型。

下面是一个使用模板字面量类型的示例：

type Greeting<T extends string> = `Hello, ${T}!`;

type GreetingWorld = Greeting<'World'>;  // GreetingWorld的类型为"Hello, World!"

在上面的示例中，我们定义了一个模板字面量类型Greeting<T>，它接受一个字符串类型参数T，并使用字符串模板将其包装在Hello,和!之间。通过使用Greeting<'World'>，我们可以将字符串字面量类型'World'传递给模板字面量类型，从而创建一个具体的类型GreetingWorld，它的类型被推断为"Hello, World!"。

模板字面量类型还支持模板字符串的拼接、条件语句、循环等操作，使得我们可以在类型级别上创建更加动态和复杂的类型。

type Pluralize<T extends string> = `${T}s`;
type Message<T extends boolean> = T extends true ? 'Enabled' : 'Disabled';

type Plural = Pluralize<'apple'>;  // Plural的类型为"apples"
type EnabledMessage = Message<true>;  // EnabledMessage的类型为'Enabled'

在上面的示例中，我们定义了两个模板字面量类型，Pluralize<T>用于将字符串类型T转换为其复数形式，Message<T>用于根据布尔类型参数T返回不同的消息。