从零学TypeScript-02 | 青训营笔记

mengww
59 阅读3分钟

这是我参与「第五届青训营 」笔记创作活动的第7天

接着上次的说。

2.1.8类型推断

在ts中某些没有明确指出类型的地方，ts的类型推论机制会帮助提供类型。换句话说，由于类型推论的存在，这些地方类型，注解可以省略不写。虽然省略不写，但类型保护机制和类型检查机制仍然存在。

发生类型推断的两种常见情景有

①声明变量并初始化值的时候

image.png

②确定函数返回值时

image.png

2.1.9类型断言

有时候你会比更加明确一个值的类型，此时可以使用类型断言来指定更具体的类型

<a herf="www.baidu.com" id="link">baidu</a>
const a = document.getElementById("link')

getElementByID方法返回值的类型是HTMLElement，该类型只包含所有标签公共的属性或方法，不包含a标签特有的herf属性，因此这个类型太宽泛，不具体，无法操作herf等a标签特有的属性或方法。这时候就需要用到类型断言。

const a = document.getElementById("link') as HTMLAnchorElement

使用as关键字实现类型断言。关键字as后面的类型是一个更加具体的类型。通过类型断言，a的类型变得更加具体，这样就可以访问a标签特有的属性或方法了

2.1.10字面量类型

先看一段代码

let arg1 = 'meng'//由于类型推断机制，arg1的类型是string
const arg2 = 'meng'//arg2的类型就是'meng'

arg1是一个变量，它的值可以是任意字符串，所以类型是string。arg2是一个常量，常量的值不能变化，只能是'meng'。所以它的类型为'meng'。注意，此处的'meng'就是一个字面量类型，也就是说，某个特定的字符串也可以作为TS中的类型。除字符串外，任意的JS字面量，比如对象、数字等都可以作为类型使用。

那么字面量类型到底有什么作用呢？

  • 使用模式：字面量类型配合联合类型一起使用
  • 使用场景：用来表示一组明确的可选值列表。比如在贪吃蛇游戏中，游戏的方向的可选值只能是上下左右中的任意一个。
function changeDirection(direction:'up'|'down'|'left'|'right'){
    console.log(direction)
}

2.1.11枚举类型

从字面量类型，我们可以引申出枚举类型

enum Direction { up, down, left, right }
function changeDirection(direction:Direction){
    console.log(direction)
}
changeDirection(Direction.up)//调用函数
  1. 使用enum关键字定义枚举
  2. 约定枚举名称,枚举中的只以大写字母开头
  3. 枚举中的多个值之间通过逗号分隔
  4. 定义好枚举后直接使用枚举名称作为类型注解

除此之外，还有一个神奇的现象--枚举的成员是有值的--默认从0开始自增的数值

image.png image.png 同时我们也把枚举成员是数值的这类枚举称为数字枚举。

当然我们也可以给枚举成员设置初始值

enum Direction { up = 10, down, left, right }
enum Direction { 
up = 10, 
down = 12, 
left = 14, 
right = 16 
}

除了数字枚举之外，还有字符串枚举。由于字符串没有初始值，所以字符串枚举的每个成员都要设置默认值

enum Direction { 
up = 'UP', 
down = 'DOWN', 
left = 'LEFT', 
right = 'RIGHT' 
}

关于枚举

image.png 美举是为数不多的非javascript类型及扩展的特性之一，因为其他类型仅仅被当作类型。而枚举，不仅用作类型，也提供值。也就是说，其他的类型会在编译为JS代码时自动移除，但是枚举类型会被编译为JS代码。

avatar
文章
阅读
粉丝