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

发布于:2024-04-28 ⋅ 阅读:(21) ⋅ 点赞:(0)

目录

1、条件判断 (extends ?)

2、推导 infer

3、联合 | 

4、交叉 &

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 可以为 numberstringboolean

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 , 由此可以判断 的类型已经为 ab 的合并类型

5、映射类型

说明: 基于旧类型创建新类型(对象类型)

  type GetNewType<T> = {
    [Key in keyof T]?: T[Key]
  }
  1. [Key in keyof T]:这是一个映射类型的语法。keyof 关键字用于获取类型 T 的所有公共属性名的联合类型。Key in keyof T 表示对于类型 T 中的每一个属性名 Key,都会生成一个新的属性。

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

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

    //例如,如果我们有如下的类型:
    type Person = {
      name: string;
      age: number;
      address?: string;
    };
    
    //那么 MapType<Person> 的类型将是:
    {
      name?: string;
      age?: number;
      address?: string;
    }


网站公告

今日签到

点亮在社区的每一天
去签到