用大白话让你理解TypeScript的要点.(三)

2022年05月15日 阅读数:2
这篇文章主要向大家介绍用大白话让你理解TypeScript的要点.(三),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

三对象的场景

通常对象.(不包括方法)

和以前同样,咱们不要上来就直接约束对象里有什么,永远是先有数据再有类型限制。数组

image.png

这时候回过头去添加类型约束。(特地示范了一个错误类型)函数

image.png

这里还有一个问题,这里咱们使用的分号去隔开每个属性的类型。这不是必须的,你能够经过多行约束来限制属性类型。spa

image.png

包含方法的对象

image.png

四.接口 interface

接口的场景一

仍是老规矩,现有具体数据再回过头添加约束条件。这里能够用 Function这个关键字来定义对象的属性值为一个函数。3d

image.png

仍是用冒号:关键字来约束条件。code

image.png

接口的场景二(继承extends)

好比咱们如今有一个额外的interface来约束新的对象对象

image.png

可是咱们发现,person2Style这个约束格式和上一person1Style好多都是同样的,咱们有没有什么方法能够直接复用那些相同的,再单独添加本身想要的一些呢?这里能够用到extends关键字来实现。实现起来也是比较容易的,若是没有想要添加的额外属性,那么咱们能够blog

image.png

image.png

四.对象的特殊拓展(元祖)

刚听到这个词直接给我整懵逼了,武侠小说元太祖吗?继承

image.png

其实深刻了解之后就知道其实就是限制你数组的数量和对应索引位置的对应值的类型而已。举个例子,好比我如今有个数字类型的数组,以下:索引

image.png

其实就是和写数据同样,把数组里数据的个数,属性和值都约束了。接口

image.png

五.枚举类型enum

这个属性其实就是规定了一些用到的常量。起个最简单的例子:

咱们如今有个函数,咱们已经知道它接受字符串参数:若是咱们这样写

image.png

好像也达到了一些目的,可是咱们只但愿它接受上(up)下(down)左(left)右(right)个参数,那么咱们就能够用到enum,用它来定义一些常量。

image.png

咱们给changeDirection这个函数的参数定义为Direction这个enum类型,
那么这样就约束

image.png

而且能够像对象同样调用这个enum类型,以下:

image.png