2022-最新TypeScript教程(三)

目录

字面量类型

类型自动推断

联合类型  

类型别名 

交叉类型


 字面量类型

在 TypeScript 中,字面量不仅可以表示值,还可以表示类型,即所谓的字面量类型。

目前,TypeScript 支持 3 种字面量类型:字符串字面量类型、数字字面量类型、布尔字面量类型,对应的字符串字面量、数字字面量、布尔字面量分别拥有与其值一样的字面量类型,具体示例如下:

{
  let faceStr: 'this is Du' = 'this is Du'
  let faceNum: 666 = 666
  let faceBoolean: true = true
}

上述代码段中"this is Du"表示一种字符串字面量类型,也可也说是string类型的子类型,但是string类型不一定是“this is Du”字符串字面量类型:

{
  let faceStr: 'this is Du' = 'this is Du';
  let str: string = "my name is Du"
  str = faceStr // ok
  faceStr = str  //Error “string"类型不能赋值给”this is Du"类型
}

扫描二维码关注公众号,回复: 14733108 查看本文章

类型自动推断

我们首先看以下TS两个代码段定义变量例子:

{
  let str: string = 'this is Du'
  let num: number = 666
  let bool: boolean = true
}

/

{
  const str: string = 'this is Du'
  const num: number = 666
  const bool: boolean = true
}

 我们在使用 let 定义基础变量时(第一个代码段),需要写清楚变量类型是可以理解的,但是在使用const常量时还需要写清类型,这不是很麻烦吗?

TypeScript 早就考虑到了这么简单而明显的问题,在一些情况下TypeScript 会根据上下文环境自动推断出变量的类型,无须我们再写明类型注解。因此,上面的示例可以简化为如下所示内容:

{
  let str = 'this is Du' //等价于 let str: string = 'this is Du',下同
  let num = 666
  let bool = true
}

/

{
  const str = 'this is Du' //由于是常量不可变,所以类型为'this is Du'字面量类型,下同
  const num = 666
  const bool = true
}

TypeScript 这种基于赋值表达式推断类型的能力称为类型推断。但是如果定义的时候没有赋值且没有指定类型,不管之后有没有赋值,都会被推断成any类型而关闭类型检查:

let values

values = 666

values = "Du"

联合类型  

联合类型表示取值可以为多种类型中的一种,使用     分隔每个类型。

let combine: string | number
combine = 'Du' // OK
combine = 666 // OK

 联合类型通常与 null 或 undefined 一起使用:

const sayLove = (name: string | undefined) => {
  /* ... */
}

上述函数形参name的类型是 string | undefined 意味着可以将 string 或 undefined 的值传递给 sayLove() 函数。 

sayLove("Du")
sayLove(undefined)

通过这个示例,你可以凭直觉知道类型 A 和类型 B 联合后的类型是同时接受 A 和 B 值的类型。此外,对于联合类型来说,还会有以下用法:

let num: 6 | 666 = 666
type EventNames = 'click' | 'scroll' | 'mousemove

以上示例中的6、666或'click'、'scroll'、'mousemove'被称为字面量类型,用来约束取值只能是某几个值中的一个。

类型别名 

类型别名用来给一个类型起个新名字,这里注意并不是创建了一个新的类型。类型别名常用于联合类型:

type Message = string | string[] | number;
let info = (message: Message) => {
  /* ... */
};

交叉类型

交叉类型是将多个类型合并为一个类型。 这让我们可以把现有的多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性,使用 & 定义交叉类型。 

{
  type Use = string & number;
}

如果我们仅仅把原始类型、字面量类型、函数类型等原子类型合并成交叉类型,是没有任何用处的,因为任何类型都不能满足同时属于多种原子类型,比如既是 string 类型又是 number 类型。因此,在上述的代码中,类型别名 Use 的类型就是个 never 类型。

交叉类型真正的用武之地就是将多个接口类型合并成一个类型,从而实现等同接口继承的效果,也就是所谓的合并接口类型,如下代码所示:

  type IntersectionType = { id: number; name: string; } & { age: number };
  const mixed: IntersectionType = {
    id: 666,
    name: 'Du',
    age: 23
  }

在上述示例中,我们通过交叉类型,使得 IntersectionType 同时拥有了 id、name、age 所有属性的类型要求。

持续更新中......

猜你喜欢

转载自blog.csdn.net/weixin_44384728/article/details/127816923