正常操作，正常分析，大家好，我是D1n910

TypeScript完全解读（4/26）接口

0 核心内容

1. 基本用法

2. 可选属性

3. 多余属性检查

4. 绕开多余属性检查

5. 只读属性

6. 函数类型

7. 索引类型

8. 继承接口

9. 混合类型接口

1 基本用法

接口，可以为我们代码数据定义结构类型，让其他人用我们的工具或者函数时，能够遵循我们的规定。

1.1、引入 ts-lint

在项目命令行中，输入命令：

`tslint --init`

生成tslint.json文件，它是用来配置tslint的一些规则。我们后面有涉及到规则部分的话，会在tslint.json的rules里进行配置。

1.2、安装必要的插件

这个安装后，可以在.vscode下创建一个settings.json文件，然后填入下面的内容，这样可以触发在保存时，自动帮忙修复掉语法问题。

{

"editor.codeActionsOnSave": {

"source.fixAll.tslint": true

}

}

记得在入口文件里引入

tslint现在修改了很多，一些之前会有语法错误提示的，现在不一定会，比如我们这边专门添加一个quotemark属性，设定为true

有看到有语法提示，应该使用双引号替代单引号

删除刚刚的那条规则

提示也不见了

后面有语法提示报错，那么按照语法提示进行修改or忽略即可。

1.5、定义接口

假设我们定义了一个方法 getFullName，通过结构赋值传一个对象，对象内的参数是firstName和lastName，输出为两个的字符串拼接

直接跑是有问题的，ts会不通过，不能完成编译，我们需要临时把tsconfig.json的strict给设置成false，然后查看效果

是能够正常打印，但是，实际上这边是希望我们能够规范类型的，比如我们希望我们传入的参数都是string类型的。

我们可以通过【接口】关键词 interface 来进行定义接口，接口名称可以自定义，首字母大些，在对象后冒号引入接口

这时候如果我们传入的类型错误，也能够像之前一样报错

我们还可以像之前一样，给函数的返回添加类型，这里是string

我们这边也可以不指定接口，通过我们后面说的类型别名来进行类型定义——所以一看还是接口好。

2、可选属性

设置可选属性的意思是，对象内的属性可以设置为可以有也可以没有。

考虑下面的获取蔬菜的方法，逻辑是，蔬菜有颜色，则输出是什么样颜色的什么品种，如果没有颜色，则输出这是什么品种

设定color为red，type为tomato，我们正常打印查看

如果我们的对象只有一个属性type呢？

发现报错了，提示类型“{ type: string; }”的参数不能赋给类型“VegetablesInfo”的参数。

我们这个color参数可以有也可以没有，可以通过加个  ? 来设定为可选参数，这时候就不报错了，也能看到正确返回的内容

3、多余属性检查

如果我们多添加了一个参数，也会提示有问题

提示：类型“{ type: string; color: string; size: number; }”的参数不能赋给类型“VegetablesInfo”的参数。

 对象文字可以只指定已知属性，并且“size”不在类型“VegetablesInfo”中。

4、绕开多余属性检查

我们一般为了保证这个函数能够正常运行，实际上加了size属性不会影响到我们的函数正常运行，为了绕过这个多余属性的检查，我们可以通过这些方法

（1）指定类型

通过指定类型，告诉ts我们的类型就是VegetablesInfo，这样就不会报错了

（2）指定可添加属性

通过指定传入属性值，类型是字符串，对应的值是任意的，可以传入任意的值

（3）利用类型兼容性

我们可以把传入的参数摘出来，赋给一个变量，这边的意思是后面的变量赋值，多了没所谓，少了就不行。

这是三种绕过多余属性检测的方式。

5、只读属性

只需要在属性面前添加 readonly 就可以设置为只读属性

我们通过这个接口定义一个对象

在进行赋值就会报错

Cannot assign to 'type' because it is a read-only property.

只能读这个type属性而不能修改。

6、函数结构

我们可以这么定义一个函数结构的接口

其中左边代表传入参数及其类型，右边代表返回值的类型

保存后，我们发现因为tslint的原因，自动修复为了下面这样的格式，用type来定义一个函数类型更好。

我们可以这么使用

我们不可以返回和我们定义的不同类型的值

这边我们的形参不一定相同，只要数量对上即可。

7、索引类型

重新定义一个类似数组接口，如下所示

会有警告不能将类型“string”分配给类型“number”。

而正确赋值类型的时候就OK

 同样的，我们这里也可以设置为readonly

错误提示：Cannot assign to '1' because it is a read-only property.

我们通常这么定义索引类型的接口

但是当我们把id值的类型换成string的时候，我们发现原来的myRoleDic2不报错了，但是用数值的myRoleDic并没有报错。原因是在js中用数值作为属性值时会隐式转换成字符串

8、继承接口

考虑下面的场景，蔬菜接口带有color属性，其他的子类目都有color属性

这些重复的属性可以抽离出来，让子类通过继承获得

这么写，myTomato会提示

Property 'color' is missing in type '{ radius: number; }' but required in type 'Tomato'

9、混合类型接口

在js中，函数是对象类型，是很灵活的，在js中对象是有属性的，函数也可以添加属性。

举例子，我们在浏览器实现一个计数器，使用闭包

也可以使用命名空间的办法

ts支持直接给函数添加属性，即使用混合类型接口，实现如下

接口和类相关的内容，可以在类那边查看并会进行补充。

恭喜你获得称号

了解TypeScript的接口的勇士

你的学习进度（4/26）

▇▇ ▇▇ ▇▇ ▇▇  ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇

本小节仓库地址

https://github.com/D1N910/ts-learning/tree/master/04

 声明

本系列内容是D1n910通过学习Lison老师的TypeScript完全解读(26课时)整理的文字笔记，如果看完后觉得有收获，抑或想要直接支持，抑或想要直接视频原版内容，请直接到https://segmentfault.com/ls/1650000018455856?r=bPXT7X。

虽然本系列是笔记，但是也有D1n910的心血所在，请勿在未告知D1n910及获得D1n910允许的情况下直接转载本笔记——如果您是基于笔记又生成您自己的笔记，这是一点问题都没有的～

之前的内容是