TypeScript中条件类型精读与实践记录

在大多数程序中，我们必须根据输入做出决策。TypeScript 也不例外，使用条件类型可以描述输入类型与输出类型之间的关系。

用于条件判断时的 extends

当 extends 用于表示条件判断时，可以总结出以下规律

若位于 extends 两侧的类型相同，则 extends 在语义上可理解为 ===，可以参考如下例子:

type result1 = 'a' extends 'abc' ? true : false // falsetype result2 = 123 extends 1 ? true : false     // false

若位于 extends 右侧的类型包含位于 extends 左侧的类型(即狭窄类型 extends 宽泛类型)时，结果为 true，反之为 false。可以参考如下例子:

type result3 = string extends string | number ? true : false // true

当 extends 作用于对象时，若在对象中指定的 key 越多，则其类型定义的范围越狭窄。可以参考如下例子:

type result4 = { a: true, b: false } extends { a: true } ? true : false // true

在泛型类型中使用条件类型

考虑如下 Demo 类型定义:

type Demo<T, U> = T extends U ? never : T

结合用于条件判断时的 extends，可知 'a' | 'b' | 'c' extends 'a' 是 false, 因此 Demo<'a' | 'b' | 'c', 'a'> 结果是 'a' | 'b' | 'c' 么?
查阅官网，其中有提到:

When conditional types act on a generic type, they become distributive when given a union type.

即当条件类型作用于泛型类型时，联合类型会被拆分使用。即 Demo<'a' | 'b' | 'c', 'a'> 会被拆分为 'a' extends 'a'、'b' extends 'a'、'c' extends 'a'。用伪代码表示类似于:

function Demo(T, U) {  return T.map(val => {    if (val !== U) return val    return 'never'  })}Demo(['a', 'b', 'c'], 'a') // ['never', 'b', 'c']

此外根据 never 类型的定义
下载地址:
SSM VUE Axios详解
js中Object.create实例用法详解