前端开发 / TypeScript 条件类型

TypeScript 条件类型

本节介绍 TypeScript 高级类型中的条件类型(conditional type),条件类型就是在初始状态并不直接确定具体类型,而是通过一定的类型运算得到最终的变量类型。

1. 慕课解释

条件类型用来表达非均匀类型映射,可以根据一个条件表达式来进行类型检测,从两个类型中选出其中一个:

T extends U ? X : Y

语义类似三目运算符:若 TU 的子类型,则类型为 X,否则类型为 Y。若无法确定 T 是否为 U 的子类型,则类型为 X | Y

2. 示例

declare function f<T extends boolean>(x: T): T extends true ? string : number

const x = f(Math.random() < 0.5) // const x: string | number

const y = f(true) // const y: string
const z = f(false) // const z: number

代码解释:

第 3 行,可以看到在条件不确定的情况下,得到了联合类型 string | number

最后两行,条件确定时,得到了具体类型 stringnumber

3. 可分配条件类型

在条件类型 T extends U ? X : Y 中,当泛型参数 T 取值为 A | B | C 时,这个条件类型就等价于 (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y),这就是可分配条件类型。

可分配条件类型(distributive conditional type)中被检查的类型必须是裸类型参数(naked type parameter)。裸类型表示没有被包裹(Wrapped) 的类型,(如:Array<T>[T]Promise<T> 等都不是裸类型),简而言之裸类型就是未经过任何其他类型修饰或包装的类型。

4. 应用场景

有了这些前置知识,我们就可以分析一下 TypeScript 内置的一些工具类型,就像在映射类型中介绍的可以通过 Partial<T>,可以在项目中直接使用。

  • Exclude<T, U> – 从 T 中剔除可以赋值给 U 的类型。
  • Extract<T, U> – 提取 T 中可以赋值给 U 的类型。
  • NonNullable<T> – 从 T 中剔除 null 和 undefined。
  • ReturnType<T> – 获取函数返回值类型。
  • InstanceType<T> – 获取构造函数类型的实例类型。

用第一个来举例分析:

type T00 = Exclude<'a' | 'b' | 'c' | 'd', 'a' | 'c' | 'f'>  // 'b' | 'd'

来看一下 Exclude<T, U> 的实现源码:

/**
 * Exclude from T those types that are assignable to U
 */
type Exclude<T, U> = T extends U ? never : T;

再看一个进阶的例子,定义一种方法,可以取出接口类型中的函数类型:

type FunctionPropertyNames<T> = { [K in keyof T]: T[K] extends Function ? K : never }[keyof T]
type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>

interface Part {
  id: number
  name: string
  subparts: Part[]
  firstFn: (brand: string) => void,
  anotherFn: (channel: string) => string
}

type FnNames = FunctionPropertyNames<Part>
type FnProperties = FunctionProperties<Part>

代码解释:

倒数第二行,首先,遍历整个接口,然后通过条件类型判断接口的属性值的类型是否是函数类型,如果是函数类型,取其属性名。得到:

type FnNames = 'firstFn' | 'anotherFn'

倒数第一行,通过上一节介绍的工具函数 Pick,拿到这个接口的所有函数类型成员集合:

type FnProperties = {
  firstFn: (brand: string) => void
  anotherFn: (channel: string) => string
}

5. 小结

学习到了本节,可以深刻的体会到 TypeScript 中的类型不单单只是简单的给变量进行标注,还可以通过各种运算,得到很多有趣的结果。