TypeScript 学习笔记 — 交叉类型、条件类型和条件分发（八）

目录

• 交叉类型
• 条件类型
  • 1. 直接传入判断的条件
  • 2. 把条件当成泛型传入
  • 3. 多重条件判断
  • 4. 判断接口中的类型
  • extends 父子关系（类型等级）
• 条件分发机制
  • 实际开发中如何避免？
    • <T,U>判断 T 是不是 U 的子类型？
    • 判断两个类型完全相等？
    • never 分发问题
• 内置的条件类型
  • 1.Exclude 排除类型(差集)
  • 2.Extract 抽取类型(交集)
  • 3.NoNullable 非空检测
  • 4. Complement 自己实现 (补集)

交叉类型

交叉类型（交集）会把多个类型变成一个类型，相当于 & 按位与操作 （都要满足才可以）,生成的交叉类型 是 A B 的子类 ，内部的嵌套类型也会做交叉类型。

联合类型（并集）相当于| 按位或，满足其中一个就可以。

interface Person1 {
  handsome: string;
  address: {
    n: string;
  };
}

interface Person2 {
  high: string;
  address: {
    n: number;
  };
}

type Person = Person1 & Person2; // 交叉类型
type a = string | number; // 联合类型
type Temp = Person["address"]["n"]; // type Temp = never

合并两个对象，相同的属性类型会变成 never, 交叉后的结果涵盖所有内容

function mixin<T, U>(a: T, b: U): T & U {
  return { ...a, ...b };
}
type Compute<T> = { [P in keyof T]: T[P] };
let r = mixin({ a: 1, b: 2 }, { c: 3, b: "2" });
type x = Compute<r>; // type x = { a: number; b: never; c: number;}

条件类型

泛型 extends 约束经常和条件类型一起 使用，条件类型的格式可以看成是三元表达式：

1. 直接传入判断的条件

// 联合类型而言子类型是其中的任何一个
type ResStatusMessage<T> = T extends 200 | 201 | 204 | 206 ? "success" : "fail";

type IMessage1 = ResStatusMessage<300>; // type IMessage1 = "fail"
type IMessage2 = ResStatusMessage<200>; // type IMessage1 = "success"

2. 把条件当成泛型传入

// 泛型在条件类型中广泛被应用
type Conditional<T, U> = T extends U ? true : false;

type R1 = Conditional<"yya", string>; // type R1 = true
type R2 = Conditional<"yya", number>; // type R2 = false

3. 多重条件判断

简单的案例解析：1 + 2 = 3，添加类型

// 如果是字符串 返回字符串， 如果是number返回number 两者都不是返回nerver
type FromatReturnValue<T> = T extends string ? string : T extends number ? number : never;

function sum<T extends string | number>(a: T, b: T): FromatReturnValue<T> {
  return a + (b as any); // 泛型之间不能做运算;
}

let r1 = sum(1, 2); //  number
let r2 = sum("1", "2"); // string

4. 判断接口中的类型

interface Fish {
  name: "鱼";
}
interface Water {
  type: "水";
}
interface Bird {
  name: "鸟";
}
interface Sky {
  type: "太空";
}

type SelectType<T> = T extends Fish ? Water : Sky;

type R3 = SelectType<Bird>; // type R3 = Sky

extends 父子关系（类型等级）

1. never 类型是字面量类型的子类型(never 底端类型 最底层的)
2. 字面量类型是基础类型的子类型
3. 基础类型是包装类型的子类型(所有包装类型的上一层都是 Object)
4. 所有类型都是 any 和 unknown 的子类型
5. 其他类型 null、undefined、void
6. 子类型可以赋予给父类型

// 1. never是字面量类型的子类型
type T1 = never extends "123" ? true : false;
let a: number = (function (): never {
  throw new Error();
})();

// 2. 字面量类型 是基础类型的子类型
type T2 = 123 extends number ? true : false;
type T3 = "abc" extends string ? true : false;

// 3. 基础类型是包装类型的子类型
type T4 = string extends String ? true : false;
type T5 = String extends Object ? true : false;

// 4. 所含有类型都是 any 和 unknown 的子类型
type T6 = any extends any ? true : false; // type T6 = true
type T7 = any extends unknown ? true : false; // type T7 = true
type T8 = any extends 1 ? true : false; // type T8 = boolean  any 可以看成 1 + 其它类型（内置有分发的机制）直接取最终的联合类型
type T9 = any extends 1 ? 1 : 2; // type T9 = 1 | 2
type T10 = unknown extends 1 ? true : false; // type T10= false

// 5. 其他类型 null、undefined、void
type T11 = null extends null ? true : false;
type T12 = undefined extends undefined ? true : false;
type T13 = undefined extends void ? true : false;

条件分发机制

分发机制触发条件：

1. 通过泛型传入的方式来比较时会出现分发
2. 类型是联合类型
3. 类型需要完全的裸露出来(裸类型)

简单的案例解析： 类型(联合类型)的比较 (分发)

interface Fish {
  name: "鱼";
}
interface Water {
  type: "水";
}
interface Bird {
  name: "鸟";
}
interface Sky {
  type: "太空";
}
type SelectType<T> = T extends Fish ? Water : Sky;
// 这里会用每一项依次进行分发,最终采用联合类型作为结果,等价于:
/** 对比过程
 * Bird -> Fish -> Sky
 * Fish -> Fish -> Water
 * Sky | Water
 */
type T1 = SelectType<Bird | Fish>; // type T1 = Water | Sky

// 如果上述泛型换一种写法，使其并非裸类型，结果会是怎么样呢？
type SelectType_2<T> = T[] extends Fish[] ? Water : Sky; // 外面包一层，使其并非裸类型
type SelectType_3<T> = T & {} extends Fish ? Water : Sky; // 外面包一层，使其并非裸类型

type T2 = SelectType_2<Bird | Fish>; // type T2 = Sky
type T3 = SelectType_3<Bird | Fish>; // type T3 = Sky

实际开发中如何避免？

<T,U>判断 T 是不是 U 的子类型？

<T,U>判断 T 是不是 U 的子类型：<1|2, 1|2|3> <1|2|3, 1|2>，实际开发时，由于分发机制返回 boolean，并没有实际意义：

//  是泛型，是联合类型，是裸类型，会触发分发机制
type UnionAssets<T, U> = T extends U ? true : false;
type T1 = UnionAssets<1 | 2, 1 | 2 | 3>; // true
type T2 = UnionAssets<1 | 2 | 3, 1 | 2>; // true | true | false -> boolean

// 包了一层，并非裸类型,表示不分发
type NoDistrubte<T> = T & {};
type UnionAssets_1<T, U> = NoDistrubte<T> extends U ? true : false;
type T3 = UnionAssets_1<1 | 2, 1 | 2 | 3>; // true
type T4 = UnionAssets_1<1 | 2 | 3, 1 | 2>; // false

判断两个类型完全相等？

通过正反 extends，判断自身与其他类型是否相等

// 包了一层，并非裸类型,表示不分发
type NoDistrubte<T> = T & {};
type IsEqual<T, U, Success, Fail> = NoDistrubte<T> extends U ? (NoDistrubte<U> extends T ? Success : Fail) : Fail;
type T1 = IsEqual<1 | 2, 2 | 1, true, false>; // true
type T2 = IsEqual<1 | 2 | 3, 2 | 1, true, false>; // false

never 分发问题

1. any 默认分发
2. never 默认只有在通过泛型传递时 会返回 never，不分发就正常

type T1 = any extends any ? true : false; // true
type T2 = any extends 1 ? true : false; //  boolean  可以看成 1 + 其它类型，直接取最终的联合类型
type T3 = any extends 1 ? 1 : 2; // 1 | 2

type NoDistrubte<T> = T & {};

type isNever<T> = T extends never ? true : false;
type isNever_2<T> = NoDistrubte<T> extends never ? true : false;

type T4 = isNever<never>; // never
type T5 = isNever_2<never>; // true

内置的条件类型

1.Exclude 排除类型(差集)

type Exclude<T, U> = T extends U ? never : T; // 自己实现  never | never | boolean
type ExcludeResult = Exclude<string | number | boolean, string | number>;

2.Extract 抽取类型(交集)

type Extract<T, U> = T extends U ? T : never; // 自己实现 string | number | never
type ExtractResult = Extract<string | number | boolean, string | number>;

3.NoNullable 非空检测

如果类型中包含 null ，就去掉

let ele = document.getElementById("root");

// type NonNullable<T> = T & {};  // 源码写法
type NonNullable<T> = T extends null | undefined ? never : T; // 自己实现
type EleElement = NonNullable<typeof ele>;

4. Complement 自己实现 (补集)

含义就是互补的 = 差集 + 子类的关系

type Complement<T, U extends T> = T extends U ? never : T; // never | number | boolean
type ComplementResult = Complement<string | number | boolean, string>;