TypeScript彻底解读(26课时)_4.TypeScript彻底解读-接口

4.TypeScript彻底解读-接口

初始化tslint

tslint --init:初始化完成后会生成tslint.json的文件

若是咱们涉及到一些规则都会在这个rules里面进行配置

安装tslint的VSCode的插件。由于我以前已经安装过了。左上角带个小星星，是推荐安装的

新建interface.ts文件。而后在index.ts内添加引用

视频中报的错误，我本机没有这个错误

提示错误，单引号应该是双引号，这个就是tslint的错误，通常是ts的错误后面前缀都是ts开头

把提示的那个错误提示复制到Rules规则里，设置为false,这是双引号的问题，设置为false，不强制必须使用双引号

第二个错误

一个文件的结束必须换行

还有一个错误就是每一行的结束 必须以分号结尾

把分号结束的规则关掉

基础用法

视频中遇到的错误：最后属性结尾要加逗号，而且文件结束要换行

结尾方法是能够在设置里面：

输入autofix找到，点击在setting.json中编辑

视频中设置了这个选项，由于我机器没有报错因此就再也不设置这个地方了。

设置好以后，这样在保存ts文件的时候，会自动帮咱们修复一些tslint的错误

继续代码

这里用到ES6的解构语法

咱们调用方法getFullName 想要输出的结果是 firstName+lastName。在调用方法的时候若是咱们传入了一个18也是没有问题的

输出一下传入的18，可是这样确定不是咱们想要的效果了

这里咱们能够经过接口来限制传入的对象的结构

依然是视频中遇到的错误，接口必须以大写字母I开头

经过设置Rules解决这个问题，设置接口的名称就再也不前缀字母 I了

 

继续代码

指定参数类型为这个接口,由于接口内规定了类型都是stirng类型的。因此后面再传递数字类型的18进去是不行的

因此这里传递两个字符串过去就没有问题了

这里还能够定义函数的返回类型为stirng类型

若是不仅用接口的话，能够直接经过对象来制定参数类型。咱们使用接口能够简单直接一些

js中有些参数是可选的

定义一个获取蔬菜的方法，若是color有值那么就返回color+空格 若是color没有值 直接返回空格。最后再拼接上type类型

const getVegetables = ({color, type}) => {
    return `A ${color ? (color + '') : ''}${type}`
}

 

定义接口，color是个可选的参数

后来安装了新的ts插件后和视频里写法就同样了

 

装错了插件了！！！！！

 

deprecated表示弃用 不宜用的意思的。

应该装的是下面这个推荐安装的

装完之后就遇到了以前视频中遇到的问题了。接口必须以I开头

提示缺乏双引号

修正错误！！！！！tslint的Rules配置错节点了

修改成正确的配置Rules就没有问题了

继续代码

视频中遇到的一个错误，参数必须按照首字母排序，这里的参数color首字母是c开头 因此要拍在tyep的前面，

加一条规则，把这一项关闭掉

这里咱们多加了一个属性，由于接口里面 旧定义两个属性

因此这里确定是报错的，可是咱们多传了size不会影响咱们程序的执行结果，由于咱们在返回的内容里面只用到了前两个参数

为了让这个接口更灵活一些，使用方法绕过这个多与属性的检查

第一种方式就是使用类型断言

使用类型断言，表示咱们传入的就是Vegetable规定的那样，那么编译器就不会报错了。

第二种方式，利用索引签名，索引签名后面会讲到，这里先看一下

执行第三个参数 属性名是string类型的，属性的值是any 任意类型。这样也不会报错了。咱们在传入值的时候，能够是任意多的属性，只要你保证该有的两个属性有值就能够了

第三种方式，类型兼容性，在后面也会讲到

例如：var b = a

a赋值给b。b只要有a该有的属性就能够了。固然b可能还有其余的属性值

这里咱们就是把要传入的值赋值给了vegetableInfo，执行的一样的道理

以上就是三种绕过多余属性的监测方式

 

设置接口属性值为只读

属性这是为readonly就是只读的属性了。后面定义一个对象，设置了type的属性，而后对type的属性就行修改就会报错

 

属性是只读的不能被修改

还能够限定数组的属性只能读取不能修改

定义函数的结构的形式

视频中一保存这个文件就变成了。为啥个人机器没有变化。。。。-_-.这里是自动变成了类型别名的形式，类型别名在后面会讲到

我点击了修复，选择了第二项 也自动变成了和视频中同样的效果，我以为这里多是由于我没有设置那个自动修复tslint的问题。有空能够试试！！！！

 

上面规定了返回的类型，这里再返回字符串是不行的

这么返回就是没有问题的了

索引类型:

属性名规定的是数字

若是我用字符串当属性名这里就报错了

属性名规定的是字符串，若是你传入的是数字也是能够的，他会自动显执行toString 再做为你的属性名

在浏览器作测试的，两个属性名都是123 第一个是数字，第二个是字符串，可是最终输出的只有一个

接口的继承：

接口的继承和类的继承类似，能够提升接口的复用性

三个都有color属性，就能够用到接口的继承

继承了接口，就都有了color的属性

 

混合类型接口

对象能够有属性，函数也是能够添加属性的

在浏览器中的，定义count变量为0

定义方法countUp每次调用countUp那么count的值就会加1

这种方式咱们须要再全局定义一个变量，有时候这个变量会被污染，因此这个方法并非一个很好的方法

这里定义的是一个当即执行函数，这是使用闭包的形式

在ts3.1以前须要借助命名空间来实现，在3.1以后ts就支持了直接给函数添加属性。混合类型接口