7 TypeScript 元组的使用和类型约束

元组是TS特有的一个概念,JavaScript并没有这个概念

7.1 元组的基本使用

我们先来看一个例子
这时候把鼠标放到xiaojiejie变量上面,可以看出推断出来的类型。我们就用类型注解的形式给他作一个注解
这个时候你已经添加了类型注解,但是在下面的代码当中会有一个小细节问题
我们只是把数组的位置调换了一下,但是TS并不能发现这个问题,所以我们需要一个更强大的类型,来解决,所以,这就是元组
元组和数组比较类似,但是类型注解的时候有点不一样
这个样子我们就把每个类型的位置都固定住了,这就叫做元组

7.2 元组的使用

我们假设有这样子的一组数据
如果是这个样子的话,我们可以看到前两个都是字符串,最后一个是常数。
你要搞清楚元组和数组的区别,在理解后能在项目中适当的时候使用不同的类型。

Demo7.ts

8 TypeScript 的 interface接口

TypeScript的接口。就是用来规范类型的

8.1 Interface 接口初步了解

我们要作一个简历的自动筛选程序,很简单。年龄小于 25 岁,胸围大于 90 公分的,可以进入面试环节。我们最开始的写法是这样的
好像还不错,我们再加上个查看简历的功能,于是你的代码是这样
但是这个时候会发现,有很多东西重复了,程序开发中一直强调“代码重用”,两个方法用的类型注解一样,需要作个统一的约束。大上节课我们学了一个类型别名的知识可以解决代码重复的问题,这节课我们就学习一个更常用的语法接口(Interface).
我们可以把这两个重复进行类型注解,定义成统一的接口。代码如下
有了这个接口后我们程序也要做一些修改
这样就更像是面向对象编程了,以后再用到同样的接口也不怕了,直接使用girl就可以了。

8.2 接口和类型别名的区别

现在我们学了接口,也学过了类型别名,这两个语法和用处好像一样, 确实用起来基本一样,但是也有少许的不同。
类型别名可以直接给类型,比如string,而接口必须代表对象。
比如我们的类型别名可以写出下面的代码:
但是接口就不能这样写,它必须代表的是一个对象,也就是说,你初始化girl的时候,必须写出下面的形式.

8.3 接口非必选值定义

我们要求尽量能看到小姐姐的腰围,但是不作强制要求,就是可选值。那接口如何定义?typeScript已经为我们准备好了相应的办法,就是在 : 号前加一个 ?
比如把Girl的接口写成这样。
再修改一下getResume方法,写成这样。
这时候在定义girl对象的时候,就可以写saistline(腰围),也可以不写了。

Demo8.ts

9 TypeScript 的 interface 接口 2

我们接着继续讲接口,接口部分的内容还是比较多的

9.1 允许加入任意值

简历一般是有自由发挥的空间的,所以这时候需要一些任意值,就是自己愿意写什么就写什么。这时候interface接口也是支持的。
propname 你可以随意改成其他的名字~
这时候我们在对象里给一个性别
再修改一下代码,就没有错误了。
这时候我们的程序是不报错的,但是如果我们去掉刚才的设置,就会报错。

9.2 接口里的方法

接口里不仅可以存属性,还可以存方法,比如这时候有个say()方法,返回值是string类型。这时候你就不要再想成简历了,你需要更面向对象化的编程,想象成一个人。
加上这个say()方法后,程序马上就会报错,因为我们对象里没有say方法。那我们就要给对象一个say方法

9.3 接口和类的约束

JavaScript从ES6里是有类这个概念的,类可以和接口很好的结合
这时候类会直接报错,所以我们需要把这个类写的完全点。

9.4 接口的继承

接口也可以用于继承的,比如你新写一个Teacher接口,继承于Person接口。
比如这时候,只看Teacher级别的简历,那我们需要修改getResume()方法。
修改后,你就会发现下面我们调用getResume2()方法的地方报错了,因为这时候传的值必须有Teach方法,修改girl对象,增加teach()方法,这时候就不会报错了。
关于接口的知识就讲到这里吧,这基本包含了接口 80%的知识

Demo9.ts

亲亲留个评论再走呗

正在加载评论区...