TypeScript 接口(Interface)使用方法

发布时间：2023-03-30 08:54:09 所属栏目：教程来源：

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

在下一节学习完类之后，你会知道类也可以作为接口来

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

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

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

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

// 语法格式
interface DemoInterface {
}

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

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

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

function getClothesInfo(clothes) {
console.log(clothes.price)
}
let myClothes = {
color: 'black',
size: 'XL',
price:
}
getClothesInfo(myClothes)
之前我们写 JavaScript 这样是很正常的，但同时你可能会遇到下面这些问题:

getClothesInfo() // Uncaught TypeError: Cannot read property 'price' of undefined
getClothesInfo({ color: 'black' }) // undefined
相信原因你也知道，JavaScript 是弱类型语言，并不会对传入的参数进行任何检测，错误在运行时才被发现。那么通过定义接口，在编译阶段甚至开发阶段就避免掉这类错误，接口将检查类型是否和某种结构做匹配。

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

interface Clothes {
color: string;
size: string;
price: number;
}
function getClothesInfo(clothes: Clothes) {
console.log(clothes.price)
}
let myClothes: Clothes = {
color: 'black',
size: 'XL',
price:
}
getClothesInfo(myClothes)
代码解释：代码中，定义了一个接口 Clothes，在传入的变量 clothes 中，它的类型为 Clothes。这样，就约束了这个传入对象的外形与接口定义一致。只要传入的对象满足上面的类型约束，那么它就是被允许的。

Tips：

定义接口要首字母大写。

只需要关注值的外形，并不像其他语言一样，定义接口是为了实现。

如果没有特殊声明，定义的变量比接口少了一些属性是不允许的，多一些属性也是不允许的，赋值的时候，变量的形状必须和接口的形状保持一致。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!