Ts支持哪些类型和类型运算(下)

目录

[1、条件判断 （extends ？）](#1、条件判断 （extends ？） "#1%E3%80%81%E6%9D%A1%E4%BB%B6%E5%88%A4%E6%96%AD%20%EF%BC%88extends%20%EF%BC%9F%EF%BC%89")

[2、推导 infer](#2、推导 infer "#2%E3%80%81%E6%8E%A8%E5%AF%BC%20infer")

[3、联合 |](#3、联合 | "#3%E3%80%81%E8%81%94%E5%90%88%20%7C%C2%A0")

[4、交叉 &](#4、交叉 & "#4%E3%80%81%E4%BA%A4%E5%8F%89%20%26")

5、映射类型

---

1、条件判断 （extends ？）

ts里的条件判断，语法为 T extends XXX ? true : false ，叫做条件类型，类似js中的三元运算符

type res = true extends boolean ? true : false

说明：这段代码我们判断了 true 是否为一个 boolean 类型 如果为真返回 true，否则返回 false

一般 条件判断 会配合泛型使用，去实现类型参数的动态计算

  type isTrue<T> = T extends boolean ? true : false;

  type res = isTrue<0>;
  type res1 = isTrue<true>;

其中 res 为 false ，res1为 true ，这种类型也叫做高级类型

高级类型的特点为 我们传入类型参数，经过一系列计算，返回新的类型。

2、推导 infer

说明：对类型进行命名，让我们可以提取这个类型，有点抽象，我们上代码

比如提取元组类型中的第一个元素

 type tupleOne = [string, number, boolean];

  type ExtractTheTupleFirst<T extends unknown[]> = T extends [
    infer First,
    ...infer arguments
  ]
    ? First
    : never;
  type res2 = ExtractTheTupleFirst<tupleOne>;

在这段代码中 ，我们首先定义了一个 元组 tupleOne

然后编写了一个工具函数 ExtractTheTupleFirst ，它接受一个泛型T作为参数，并对T约束为一个 unknow 的数组类型，

随后 我们通过条件判断语句 判断 T 是否存在第一个元素并重命名为 First，剩余元素命名为 arguments ，如果存在的话 返回 First 否则返回 never

3、联合 |

说明：由两个或多个类型组成的类型，可以是这些类型中的任何一个值

例如：

type res = number | string | boolean

这里res 可以为 number 或 string 或 boolean

4、交叉 &

说明：交叉类型一般用于合并类型

例如：

 type a = {
    a: boolean;
  };
  type b = {
    b: string;
  };
  type c = a & b;
  type resd = c extends { a: boolean; b: string } ? true : false;

我们可以看到 resd 为类型为 true ， 由此可以判断 c 的类型已经为 a 和 b 的合并类型

5、映射类型

说明： 基于旧类型创建新类型（对象类型）

  type GetNewType<T> = {
    [Key in keyof T]?: T[Key]
  }

2. [Key in keyof T] ：这是一个映射类型的语法。keyof 关键字用于获取类型 T 的所有公共属性名的联合类型。Key in keyof T 表示对于类型 T 中的每一个属性名 Key，都会生成一个新的属性。

3. ? ：这是可选属性的语法。它表示这个属性是可选的，即在使用 GetNewType<T> 类型的对象时，可以不提供这个属性。

4. T[Key] ：这表示属性 Key 的类型应该是类型 T 中 Key 对应的属性的类型

//例如，如果我们有如下的类型：
type Person = {
  name: string;
  age: number;
  address?: string;
};

//那么 MapType<Person> 的类型将是：
{
  name?: string;
  age?: number;
  address?: string;
}