关于前端:系统学习-TypeScript六认识接口

接口是咱们在进行模块、办法等的封装时常常会用到的一个概念，应用接口能够：

将一类具体事务形象成繁多的对象办法，使用者不用关怀外部的实现逻辑，只须要依照要求传入对应的参数即可失去预期的后果输入，从很大水平上加重了使用者的心智累赘。
一处定义，多处应用，加重后续的保护累赘。

TypeScript 也有接口的概念，它被用来校验数据类型是否符合要求。

TypeScript 接口就像是一份具备名称的契约或者规定，契约的内容规定了某个数据结构外面的数据组成和类型，只有有某处 通过名称 调用了这份契约，那就意味着此处的数据必须要承受并通过契约内容的查看，否则会报错。

如果用 JavaScript，咱们的代码可能是这样的：

function printInfo(info){console.log(info.name);
}
printInfo({name: "编程三昧"});
// 编程三昧
printInfo({age: 22});
// undefined
printInfo();
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')

因为 JavaScript 没有动态类型查看机制，在代码真正运行前无奈精确判断可能会呈现的问题。常常在调用一个接口前，还须要钻研一下这个接口相干的源码，这很 不利于协同开发。

咱们迫切需要一种可能在办法调用时明确显示所需参数类型及格局的机制。

在学习 TypeScript 接口之前，咱们的 TypeScript 代码可能是这样的：

let personalInfo_1: {name: string; age: number} = {
    name: "编程三昧",
    age: 22
};

let personalInfo_2: {name: string; age: number} = {
    name: "隐逸王",
    age: 22
};

尽管达到了数据类型查看的目标，然而很显著，类型查看器 {name: string; age: number} 反复，造成了代码冗余。

下面两段代码暴露出两个问题：

没有类型查看器的机制不利于协同开发；
惯例的 TypeScript 类型查看器写法容易造成代码冗余。

应用 TypeScript 接口就能够解决上述问题。比方：

interface PersonalInfo {
    name: string;
    age: number;
}

function printPersonalInfo(info: PersonalInfo): void {console.log(info);
}

let personalInfo_1: PersonalInfo = {
    name: "编程三昧",
    age: 22
};

let personalInfo_2 = {
    name: "隐逸王",
    age: 22,
    gender: "Male"
}

let personalInfo_3 = {age: 22}
printPersonalInfo(personalInfo_1);
// 编程三昧
printPersonalInfo(personalInfo_2);
// 隐逸王
printPersonalInfo(personalInfo_3);
// Error, 具体报错信息如下图

能够看到，通过应用 TypeScript 接口，既实现了类型查看，又缩小了反复指定类型查看器的冗余。

就像咱们之前说的，TypeScript 接口就是一份束缚数据类型的契约，谁都能够通过名称去应用它来束缚本人的数据类型，这就实现了复用的成果。

在下面代码中，不晓得大家有没有留神到一点比拟怪异的中央：personalInfo_2 的数据类型并不合乎 printPersonalInfo 办法中指定的数据类型，然而代码却没有报错。

对于这一点，不晓得大家都是怎么了解的？

本文次要介绍了为什么要用 TypeScript 接口的起因以及用接口的益处。接口就像是一份契约，内容规定了数据格式，任何变量都可通过接口名称应用接口进行类型查看。

并且还引出了一个纳闷点，大家能够就这个问题给出本人的见解，欢送在评论区交换！

~ 本文完，感激浏览！

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

关于前端:系统学习-TypeScript六认识接口

前言

JavaScript 代码示例

不应用接口的 TypeScript 代码示例

为什么要用 TypeScript 接口？

存在的纳闷

总结