你是否曾经在学习/使用 TS 时:

1. 看了各种TS文档，写起来还是似懂非懂；
2. 接触了一些TS关键字，用起来不太熟练，缺乏明确的理论参考；
3. TS写着写着降级到了JS；
4. 类型在不知道什么地方就断了层，再也接不上了； 如果你觉得我偷窥了你的工作的话🐶，那么这篇文章可能非常适合你。今天和大家分享 Typescript 中一个常用的知识点 -- 条件类型（condtion type）

思考几个Demo

大家看到下面的 TS 类型时, 是否会感到迷惑？

1. 迷惑问题1

type Extract<T,U> = T extends U ? T : never ;
Extract<"a" | "b" | "c", "a"> // "a"  
// Why ? !!!

为啥类型 Extract 可以取到 T 和 U 的交集？

1. 迷惑问题2

type Length1<T> = T['length'] 
// error Type '"length"' cannot be used to index type 'T'.(2536)

type Length2<T> = T extends any[] ? T['length'] : never; 
// success 

为什么类型 Length1 报错, Length2 却可以正确获取到范型 T 的 length

1. 迷惑问题3

type Case<T> = [T] extends [(args: infer R) => any] ? R : never;
type Demo = Case<((args: { name: string; }) => any) | ((args: { age: number; }) => any)>  
// { name: string } & { age: number }

为啥在这里 Demo 的值为 { name : string } & { age : number }

condition type

参考链接: www.typescriptlang.org/docs/handbo… 其实上面的 demo 都使用到了condition type 的知识点。学习完下面，你就可以理解 Typescript 为什么这么的神奇了😄

定义

Typescript2.8 添加了能表示非一致类型的条件类型。一个条件类型会基于类型关系测试（type relationship test）推断两个可能类型中的其中一个可能类型。Typescript2.8 添加了能表示非一致类型的条件类型。一个条件类型会基于类型关系测试（type relationship test）推断两个可能类型中的其中一个可能类型。

T extends U ? X : Y 

上面的类型表示如果 T 可以分配给 U ， 这个类型为 X ，否则为 Y。

分发条件类型 (Distributive conditional types)

如果条件类型中有存在待检查的类型checked type，那么被称为 naked type parameter,也被称为 distributive conditional types。如果这个类型被联合类型代替，条件类型会被自动分配。例如，如果在一个 T extends U ? X : Y 实例类型类型中 T 被分配为 A | B | C。该类型会被分配为 (A extends U ? X : Y) | (B extends U ? X : Y) | (C extends U ? X : Y). 例子如下：

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 T1 = TypeName<string | (() => void)>; // "string" | "function"

需要关注的是分发条件类型的前置要求是存在范型， 如果没有范型，普通的extends表达式是不会进行分发条件类型 的。 如下面例子

type a = 'a' | 'b' | 'c' extends 'a' ? 'a' : never; // never, 这里并没有做类型分发，所以输出是 never 

其实这里就可以解释 Demo1 了。

type Extract<T,U> = T extends U ? T : never ;
Extract<"a" | "b" | "c", "a"> 
=  "a" extends "a" ? "a" : never | "b" extends "a" ? "a" : never | "c" extends "a" ? "a" : never
=  "a" | never | never 
=  "a"

隐式的类型分配

In instantiations of a distributive conditional type T extends U ? X : Y, references to T within the conditional type are resolved to individual constituents of the union type (i.e. T refers to the individual constituents after the conditional type is distributed over the union type). Furthermore, references to T within X have an additional type parameter constraint U (i.e. T is considered assignable to U within X). 这句话的意思就是在 条件类型 的 True 分支中，T 的类型被认为是一个 U 类型的子类型。 这句话比较难理解，还是跟着下面这个例子来说。我们想获取一个类型 T 的 length 属性。

type Length1<T> = T['length'] 
// error Type '"length"' cannot be used to index type 'T'.(2536)

type Length2<T> = T extends { length: number } ? T['length'] : 0; 
// success 

type Length1 中报错是因为 T 的类型是未知的，类型 T 可能没有 length 索引（index）。 如果我们想让编译器知道类型 T 有 length 这个属性应该怎么做呢。 这里就可以用到上面这个知识点了。 我们让 T 做一个 T extends { length: number } 的条件类型判断， 如果 T 存在 length 属性，那我们获取 length 的值, 否则就返回 0;

条件类型的协变与逆变

For each type variable introduced by an infer (more later) declaration within U collect a set of candidate types by inferring from T to U (using the same inference algorithm as type inference for generic functions). For a given infer type variable V, if any candidates were inferred from co-variant positions, the type inferred for V is a union of those candidates. Otherwise, if any candidates were inferred from contra-variant positions, the type inferred for V is an intersection of those candidates. Otherwise, the type inferred for V is never. 这句话也是比较复杂了， 可以理解为如果在条件类型中使用了T extends U ? X : Y 中，如果在 U 中使用了 infer 关键字，如果推断的候选类型是从协变的位置上推断出来的，那么V的类型是那些候选类型的联合。反之，如果有候选类型是从逆变的位置上推断出来的，那么V的类型是那些候选类型的交叉类型。否则V的类型是never。 具体例子可看 迷惑问题3 。

type Case<T> = [T] extends [(args: infer R) => any] ? R : never;
type Demo = Case<((args: { name: string; }) => any) | ((args: { age: number; }) => any)>  

在 类型 Case 中， infer R 的位置在函数的参数中， 即为逆变。 所以 R 的类型为候选类型的交叉类型。 即 { name : string } & { age : number } 。

小结

学了完后是不是想做点习题尝试下呢？可以尝试下下面几题，看看你对条件类型掌握的如何？

1. Type Lookup
2. 思考题: 在迷惑问题2中， Case 的类型为啥不能写成

type Case<T> = [T] extends [(args: infer R) => any] ? R : never;
type Demo = Case<((args: { name: string; }) => any) | ((args: { age: number; }) => any)>  
// 为啥不能写成 type Case<T> = T extends (args: infer R) => any ? R : never

1. Union To Intersection

最后希望和大家一起快乐的做类型体操😄