关于前端:现代TypeScript高级教程高级类型

高级类型

映射类型（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 返回不同的音讯。