23.【TypeScript 教程】条件类型

TypeScript 条件类型

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

1. 解释

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

T extends U ? X : Y

语义类似三目运算符：若?T?是?U?的子类型，则类型为?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。

最后两行，条件确定时，得到了具体类型?string?或?number。

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 中的类型不单单只是简单的给变量进行标注，还可以通过各种运算，得到很多有趣的结果。