TypeScript 的 extends 条件类型

·  阅读 15429
TypeScript 的 extends 条件类型

这是 TS2.8 版本中推出的特性,此能力让类型定义变的更加灵活,需要注意:extends 运用在 type 和 class 中时完全是两种作用的效果。

条件类型是一种条件表达式进行类型的关系检测。

简单的值匹配

type Equal<X, Y> = X extends Y ? true : false;

type Num = Equal<1, 1>; // true
type Str = Equal<'a', 'a'>; // true
type Boo = Equal<true, false>; // false
复制代码

可以简单理解为一个三元表达式,当然没有那么简单,让我们更深的扒一扒。

简单的类型匹配

首先理解什么是 ”可被分配“,例如下面的这个简单且正确的类型声明与进行赋值:

const num: number = 1; // 可被分配
const str: string = 2; // 不可被分配
复制代码

而条件类型的判断逻辑,和上面的的 ”可被分配“ 相同逻辑:

type IsNum<T> = T extends number ? number : string

type Num = IsNum<1>   // number;
type Str = IsNum<'1'> // string;
复制代码

嵌套类型匹配

就像 if 语句一个道理,可以无限嵌套。下面写一个:根据值类型,获取值类型名称的函数类型(这也是官方给的例子):

type TypeName<T> =
    T extends string    ? "string" :
    T extends number    ? "number" :
    T extends boolean   ? "boolean" :
    T extends undefined ? "undefined" :
    T extends Function  ? "function" :
    "object";

type T0 = TypeName<string>;  // "string"
type T1 = TypeName<"a">;     // "string"
type T2 = TypeName<true>;    // "boolean"
type T3 = TypeName<() => void>;  // "function"
type T4 = TypeName<string[]>;    // "object"
复制代码

判断联合类型

type A = 'x';
type B = 'x' | 'y';

type Y = A extends B ? true : false; // true
复制代码

其中联合类型 A 的所有子类型,在联合类型 B 中存在,则条件满足。 如果我们把返回值替换为其他的类型定义,就能根据判断,得出想要的类型。

当联合类型无法做出判断时

我们编写一个 函数类型,逻辑很简单:给的类型是 x 时返回 a 则返回 b。

type AB<T> = T extends 'x' ? 'a' : 'b';

type A = AB<'x'>;
// 得到 type A = 'a'
复制代码

看上去没什么问题,那是因为我们传入了一个明确的判断值,肯定为 true。

假设我们传入不确定的值,例如一个联合类型 'x' | 'y' 会怎么样呢?判断逻辑可能是 true,也可能是 false。其实 TypeScript 也不知道该怎么办,于是乎它就把两个结果的值都返回给我们了:

type AB<T> = T extends 'x' ? 'a' : 'b';

type All = AB<'x' | 'y'>; // 非确定条件,可能是 'x' 或 'y'
// 得到 type All = 'a' | 'b';
复制代码

我们得到了一个 联合类型 包含所有返回值的。

官方的解释是:此时做了 推迟解析条件类型 的处理。

推迟解析条件类型的额外效果

在得知 条件类型不确定时会返回所有的值 的特性情况下,会产生一些额外的效果。

现在我们把传入的 T 类型也一起返回,有趣的事情就发生了。且放置 T 位置不同,产生的效果也不同:

type Other = "a" | "b";
type Merge<T> = T extends "x" ? T : Other; // T 等于匹配的类型,然后加上 Other 联合类型一起返回

type Values = Merge<"x" | "y">;
// 得到 type Values = "x" | "a" | "b";
复制代码
type Other = "a" | "b";
type Merge<T> = T extends "x" ? Other : T; // T 等于除匹配类型的额外所有类型(官方叫候选类型)

type Values = Merge<"x" | "y">;
// 得到 type Values = "a" | "b" | 'y';
复制代码

通过这个特性,我们可以写出 Diff<T, U> 这样常用的函数类型,一个过滤功能的函数类型:

type Filter<T, U> = T extends U ? never : T;

type Values = Filter<"x" | "y" | "z", "x">;
// 得到 type Values = "y" | "z"
复制代码

对于 never 将单独进行细讲,这里我们理解为 什么都没有 就行。

使用条件类型结合 映射类型 又可以组合出很多函数类型,官网也因此预置了很多高级类型(例如:Typescript 中的 Partial, Readonly, Record, Pick),之后将会分享官方定义的所有高级类型。

条件类型还提供了 infer 推断的能力,单独进行讲解 《TypeScript 条件类型的 infer 类型推断能力

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改