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

三对象的场景

一般对象.(不包括方法)

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

image.png

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

image.png

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

用大白话让你理解TypeScript的要点.(三)_第1张图片

包含方法的对象

用大白话让你理解TypeScript的要点.(三)_第2张图片

四.接口 interface

接口的场景一

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

用大白话让你理解TypeScript的要点.(三)_第3张图片

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

用大白话让你理解TypeScript的要点.(三)_第4张图片

接口的场景二(继承extends)

比如我们现在有一个额外的interface来约束新的对象

用大白话让你理解TypeScript的要点.(三)_第5张图片

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

用大白话让你理解TypeScript的要点.(三)_第6张图片

用大白话让你理解TypeScript的要点.(三)_第7张图片

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

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

image.png

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

image.png

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

image.png

五.枚举类型enum

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

我们现在有个函数,我们已经知道它接受字符串参数:如果我们这样写

image.png

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

用大白话让你理解TypeScript的要点.(三)_第8张图片

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

用大白话让你理解TypeScript的要点.(三)_第9张图片

并且可以像对象一样调用这个enum类型,如下:

image.png

你可能感兴趣的