TypeScript学习（四）

最新推荐文章于 2024-03-26 17:34:46 发布

Acrisabld

最新推荐文章于 2024-03-26 17:34:46 发布

阅读量210

点赞数

分类专栏： TypeScript 文章标签：学习

本文链接：https://blog.csdn.net/Langlous2000817/article/details/127266343

版权

TypeScript 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

3.9元祖

场景：在地图中，使用经纬度坐标来标记位置信息

可以使用数组来记录坐标，该数组只有两个元素，并且这两个元素都是数值类型

let cor: number[] = [120, 30]

使用number[]的缺点：不严谨，因为该类型的数组中可以出现任意多个数字

更好的方式：元祖 Tuple

元祖类型是另一种类型的数组，它确切知道包含多少个元素，以及特定索引对应的类型

let cor: number[] = [120, 30]
let posoition: [number, number] = [120, 30]

3.10类型推论

在TS中，某些没有明确指出类型的地方，TS的类型推论机制会帮助提供类型。

换句话说：由于类型推论的存在，这些地方，类型注释可以省略不写

发生推论的两种常见场景：1.声明变量并初始化时 2.决定函数返回值时

这两种情况类型注释可以不写

推荐：能省略的地方就省略，提高开发效率

3.11类型断言

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

两种断言写法

const aLink = document.getElementById('link') as HTMLAnchorElement
const aLink = <HTMLAnchorElement>document.getElementById('link')

1.使用as关键字断言

2.as后面是一个更加具体的类型

3.通过类型断言，aLink的类型变的更加具体，这样就可以访问a标签特有的属性或方法了。

4.console.dir()打印DOM元素，在属性列表的最后面，即可看到元素的类型

3.12字面量类型

let str1 = 'Hello Ts' //string类型
const str2 = 'Hello TS' //Hello Ts 类型

解释

str2是一个常量，它的值不能变化，所以类型是'Hello TS'

此处的'Hello TS' 就是一个字面量类型，也就是说某个特定的字符串也可以作为TS中的类型，除了字符串外，任意的JS字面量（对象、数字）都可以作为类型使用

3.13枚举类型

枚举类型相当于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。

枚举：定义一组枚举常量。它描述一个值，该值可以是这些命名常量中的一个

enum Direction {
    Top,
    Left,
    Bottom,
    Right,
}

function changeDirection(direction: Direction) {
    console.log(direction)
}

changeDirection(Direction.Top)

解释：

1.使用enum关键字定义枚举

2.约定枚举名称、值以大写字母开头

3.枚举中多个值以逗号作为分隔

4.定义好枚举后直接使用枚举名称作为类型注释

注意：形参direction的类型为枚举Direction,那么实参的值就是枚举Direction成员中的任意一个。

枚举成员的值以及数字枚举

问题：我们把枚举成员作为了函数的实参，它的值是什么？
changeDirection(Direction.Top) //Direction.Top=0
注意：

1.枚举成员是有值的，默认为0开始自增的数值

2.我们把枚举成员的值为数字的枚举，称为数字枚举

3.可以给枚举成员初始化值
enum Direction {
    Top = 2,
    Left = 10,
    Bottom = 8,
    Right = 6,
}

字符串枚举:枚举成员的值是字符串