《现代Typescript高级教程》高级类型

红太狼 2023-10-13 21:22 9阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">点击在线阅读，体验更好</a></th> 
   <th><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">现代JavaScript高级小册</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">深入浅出Dart</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
  <tr> 
   <td><strong><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">现代TypeScript高级小册</a></strong></td> 
   <td><a href="https://link.juejin.cn?target=https%3A%2F%2Fwww.coding-time.cn" title="https://www.coding-time.cn" rel="nofollow">链接</a></td> 
  </tr> 
 </tbody> 
</table>

## 高级类型 ##

### 映射类型(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) ###

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

Textends 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`返回不同的消息。