TypeScript 接口(Interface)

本节介绍 TypeScript 各种类型接口的声明及其使用方法,接口在 TypeScript 中是极其重要的,我们使用接口来定义契约,如类型命名、属性检查、函数类型定义等。

在下一节学习完类之后,你会知道类也可以作为接口来使用。接口的种类繁多,在学习过程中一定要亲手编写,以达到灵活使用。

1. 慕课解释

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在 TypeScript 里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。——官方定义

接口是对 JavaScript 本身的随意性进行约束,通过定义一个接口,约定了变量、类、函数等应该按照什么样的格式进行声明,实现多人合作的一致性。TypeScript 编译器依赖接口用于类型检查,最终编译为 JavaScript 后,接口将会被移除。

// 语法格式
interface DemoInterface {

}

2. 应用场景

在声明一个对象函数或者时,先定义接口,确保其数据结构的一致性。

在多人协作时,定义接口尤为重要。

3. 接口的好处

过去我们写 JavaScript 定义一个函数:

function getClothesInfo(clothes) {
  console.log(clothes.price)
}

let myClothes = {
  color: 'black', 
  size: 'XL', 
  price: 98 
}
getClothesInfo(myClothes)

之前我们写 JavaScript 这样是很正常的,但同时你可能会遇到下面这些问题:

getClothesInfo() // Uncaught TypeError: Cannot read property 'price' of undefined
getClothesInfo({ color: 'black' }) // undefined

相信原因你也知道,JavaScript 是 弱类型 语言,并不会对传入的参数进行任何检测,错误在运行时才被发现。那么通过定义 接口,在编译阶段甚至开发阶段就避免掉这类错误,接口将检查类型是否和某种结构做匹配。

3.1 举例说明

下面通过接口的方式重写之前的例子:

实例演示
预览 复制