拆解 Typescript 黑魔法 —— Extract 类型

2023-11-21 07:24:43

认识 Extract 类型

Extract 类型是一个内置于 Typescript 的类型操作符，可以从联合类型中提取出满足指定条件的类型。它的语法格式如下：

Extract<Type, Union>

其中：

Type 是一个联合类型。
Union 是一个类型或类型的联合。
Extract<Type, Union> 返回一个类型，该类型是从 Type 中提取出所有满足 Union 类型约束的类型。

例如，如果我们有一个联合类型 string | number | boolean，我们可以使用 Extract 类型操作符来提取出其中的数字类型：

Extract<string | number | boolean, number> // number

Extract 类型的原理

要理解 Extract 类型的原理，我们需要了解 Typescript 中的类型推断机制。Typescript 会根据变量的赋值类型来推断出变量的类型。例如，如果我们有一个变量 x，并给它赋值为一个数字，那么 x 的类型就会被推断为 number：

let x = 10; // x 的类型被推断为 number

Extract 类型操作符正是利用了 Typescript 的类型推断机制。它通过创建一个临时变量，并将联合类型中的每个类型依次赋值给这个临时变量，然后根据临时变量的类型来推断出满足条件的类型。

例如，对于联合类型 string | number | boolean，Extract 类型操作符会创建一个临时变量 x，并依次将 string、number 和 boolean 赋值给 x：

let x: string | number | boolean;

x = "hello"; // x 的类型被推断为 string
x = 10; // x 的类型被推断为 number
x = true; // x 的类型被推断为 boolean

然后，Extract 类型操作符会根据 x 的类型来推断出满足条件的类型。在本例中，x 的类型分别是 string、number 和 boolean，因此 Extract 类型操作符会返回一个类型 number，因为 number 是唯一满足 Union 类型约束的类型。

Extract 类型的用法

Extract 类型操作符可以用于各种场景，例如：

从联合类型中提取出满足指定条件的类型。
从对象类型中提取出具有指定属性的类型。
从数组类型中提取出满足指定条件的元素类型。

以下是一些 Extract 类型操作符的常见用法示例：

// 从联合类型中提取出满足指定条件的类型
type StringOrNumber = string | number;
type NumberType = Extract<StringOrNumber, number>; // number

// 从对象类型中提取出具有指定属性的类型
type Person = {
  name: string;
  age: number;
};
type PersonWithName = Extract<Person, { name: string }>; // { name: string }

// 从数组类型中提取出满足指定条件的元素类型
type StringArray = string[];
type StringArrayType = Extract<StringArray, string>; // string