TypeScript 的出现很好地弥补了 JavaScript 在静态类型检查方面的缺陷。它为 JavaScript 提供了良好的类型检查支持，而且能够编译成标准的 JavaScript。

目前， Angular 已经使用 TypeScript 重构了代码，另一大前端框架 Vue 的新版本也将使用 TypeScript 进行重构。在可预见的未来，TypeScript 将成为前端开发者必须掌握的开发语言之一。

今天就和大家聊聊 TypeScript 对象的类型-接口。

01 什么是接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

接口是一系列抽象方法的声明，是一些方法特征的集合，第三方可以通过这组抽象方法调用，让具体的类执行具体的方法。

TypeScript 中接口除了可用于对类的一部分行为进行抽象以外，还可用于对「对象的形状（Shape）」进行描述。

举个例子：

这里定义了一个接口 Person，接着定义了一个变量 Faker，它的类型是 Person。这样就约束了 faker 的形状必须和接口 Person 一致。

注意：接口一般首字母大写

定义的变量比接口少了一些属性是不允许的：

多一些属性也是不允许的：

因此赋值时变量的形状必须和接口的形状保持一致。

02 可选属性

可选属性是指该属性可以不存在，当我们希望不要完全匹配一个形状，可以用可选属性：

这时仍然不允许添加未定义的属性：

03  任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

使用 [propName: string] 定义了任意属性取 string 类型的值

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它类型的子集：

上例中，任意属性的值允许是 string，但可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了

注意：一个接口中只能定义一个任意属性

如果接口中有多个类型的属性，则可以在任意属性中使用联合类型：

04  只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值，那么可以用 readonly 定义只读属性：

上例中，使用 readonly 定义的属性 id 初始化后又被赋值，所以报错

注意，只读的约束存在于第一次给对象赋值的时候，而非第一次给只读属性赋值的时候：

上例中，报错信息有两处：

1.在对 faker 进行赋值的时候，没有给 id 赋值

2.在给 faker.id 赋值的时候，由于它是只读属性，所以报错了

05  联合类型和接口

以下实例演示了如何在接口中使用联合类型：

输出结果为：

Hello

Hello

World

**Hello World**

06  接口和数组

接口中我们可以将数组的索引值和元素设置为不同类型，索引值可以是数字或字符串

07  接口继承

接口继承就是说接口可以通过其他接口来扩展自己，Typescript 允许接口继承多个接口，继承使用关键字 extends

1.单接口继承

单接口继承语法格式：

示例：

输出：

年龄: 22

喜欢的乐器: piano

2.多接口继承

多接口继承语法格式：

示例：

 

输出：

value 1: 22 value 2: 23

所以TS成为新宠还是有原因的~

学到了吧？学到就是赚到。

如果觉得文章对你有点帮助，请微信搜索「 极光训练营 」第一时间阅读，并且还可以加入技术交流群与千位大咖一起交流学习