一.为什么使用接口
1）JavaScript存在的问题
我们在JavaScript中定义一个函数，用于获取一个用户的姓名和年龄的字符串：
const getUserInfo = function(user) { return
name: ${user.name}, age: ${user.age}; };
正确的调用方法应该是下面的方式：
getUserInfo({name:”coderwhy”, age:18})
但是当项目比较大，或者多人开发时，会出现错误的调用方法：
// 错误的调用 getUserInfo() // Uncaught TypeError: Cannot read property ‘name’ of undefined console.log(getUserInfo({name:”coderwhy”})) // name: coderwhy, age: undefined getUserInfo({name:”codewhy”, height:1.88}) // name: coderwhy, age: undefined
因为JavaScript是弱类型的语言，所以并不会对我们传入的代码进行任何的检测，但是在之前的javaScript中确确实实会存在很多类似的安全隐患。
如何避免这样的问题呢？
- 当然是使用TypeScript来对代码进行重构
2）TypeScript代码重构1
const getUserInfo = (user: {name: string, age: number}): string=> { return
name: ${user.name} age: ${user.age}; };
正确的调用是如下的方式：
getUserInfo({name:”coderwhy”, age:18});
如果调用者出现了错误的调用，那么TypeScript会直接给出错误的提示信息：
// 错误的调用 getUserInfo(); // 错误信息：An argument for ‘user’ was not provided. getUserInfo({name:”coderwhy”}); // 错误信息：Property ‘age’ is missing in type ‘{ name: string; }’ getUserInfo({name:”coderwhy”, height:1.88}); // 错误信息：类型不匹配
这样确实可以防止出现错误的调用，但是我们在定义函数的时候，参数的类型和函数的类型都是非常长的，代码非常不便于阅读。
所以，我们可以使用接口来对代码再次进行重构。
3）TypeScript代码重构二
接口重构一：参数类型使用接口定义
我们先定义一个IUser接口：
// 先定义一个接口 interface IUser { name: string; age: number; }
接下来我们看一下函数如何来写：
const getUserInfo = (user: IUser): string=> { return
name: ${user.name}, age: ${user.age}; }; // 正确的调用 getUserInfo({name:”coderwhy”, age:18}); // 错误的调用，其他也是一样 getUserInfo();
接口重构二：函数的类型使用接口定义好
我们先定义两个接口：
第二个接口定义有一个警告，我们暂时忽略它，它的目的是如果一个函数接口只有一个方法，那么可以使用type来定义 type IUserInfoFunc = (user: IUser) => string;
interface IUser { name: string; age: number; } interface IUserInfoFunc { (user: IUser): string; }
接着我们去定义函数和调用函数即可：
constgetUserInfo: IUserInfoFunc = (user) => { return
name: ${user.name}, age: ${user.age}; }; // 正确的调用 getUserInfo({name:”coderwhy”, age:18}); // 错误的调用 getUserInfo();
二.接口的基本使用
1）接口定义的方式
和其他很多的语言类似，TypeScript中定义接口也是使用interface关键字来定义：
interface IPerson { name: string; }
2）接口中定义方法
定义接口中不仅仅可以有属性，也可以有方法：
interface Person { name: string; run(): void; eat(): void; }
如果我们有一个对象是该接口类型，那么必须包含对应的属性和方法：
constp: Person = { name:”why”, run() { console.log(“running”); }, eat() { console.log(“eating”); }, };
3）可选属性的定义
默认情况下一个变量（对象）是对应的接口类型，那么这个变量（对象）必须实现接口中所有的属性和方法。
但是，开发中为了让接口更加的灵活，某些属性我们可能希望设计成可选的（想实现可以实现，不想实现也没有关系），这个时候就可以使用可选属性
interface Person { name: string; age?: number; run(): void; eat(): void; study?(): void; }
上面的代码中，我们增加了age属性和study方法，这两个都是可选的：
- 可选属性如果没有赋值，那么获取到的值是undefined；
- 对于可选方法，必须先进行判断，再调用，否则会报错；
const p: Person = { name:”why”, run() { console.log(“running”); }, eat() { console.log(“eating”); }, }; console.log(p.age); // undefined p.study(); // 不能调用可能是“未定义”的对象。
正确的调用方式如下：
if (p.study) { p.study(); }
4）只读属性的定义
默认情况下，接口中定义的属性可读可写：
如果一个属性，我们只是希望在声明的时候就定义值，之后不可以修改，那么可以在属性的前面加上一个关键字：readonly
interface Person { readonlyname: string; age?: number; run(): void; eat(): void; study?(): void; }
当我在name前面加上readonly时，赋值语句就会报错：
console.log(p.name); p.name = “流川枫”; // Cannot assign to ‘name’ because it is a read-only property.
readonly vs const
最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。做为变量使用的话用const，若做为属性则使用readonly。
三.接口的高级使用
1）函数类型的定义
接口不仅仅可以定义普通的对象类型，也可以定义函数的类型
// 函数类型的定义 interface SumFunc { (num1: number, num2: number): number; } // 定义具体的函数 const sum: SumFunc = (num1, num2) => { returnnum1 + num2; }; // 调用函数 console.log(sum(20, 30));
不过上面的接口中只有一个函数，TypeScript会给我们一个建议，可以使用type来定义一个函数的类型：
typeSumFunc = (num1: number, num2: number) =>number;
对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。比如，我们使用下面的代码重写上面的例子：
2）可索引类型的定义
和使用接口描述函数的类型差不多，我们也可以使用接口来描述 可索引类型
- 比如一个变量可以这样访问：a[3]，a[“name”]
可索引类型具有一个 索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。
// 定义可索引类型的接口 interface RoleMap {
[index: number]: string; } // 赋值具体的值 // 赋值方式一： constroleMap1: RoleMap = { 0:”学生”, 1:”讲师”, 2:”班主任”, }; // 赋值方式二：因为数组本身是可索引的值 const roleMap2 = [“鲁班七号”, “露娜”, “李白”]; // 取出对应的值 console.log(roleMap1[0]); // 学生 console.log(roleMap2[1]); // 露娜
上面的案例中，我们的索引签名是数字类型， TypeScript支持两种索引签名：字符串和数字。
我们来定义一个字符串的索引类型：
interfaceRoleMap {
[name: string]: string; } constroleMap: RoleMap = { aaa:”鲁班七号”, bbb:”露娜”, ccc:”李白”, }; console.log(roleMap.aaa); console.log(roleMap[“aaa”]); // 警告：不推荐这样来取
可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型：
- 这是因为当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。
classPerson { privatename: string = “”; } classStudentextendsPerson { privatesno: number = 0; } // 下面的代码会报错 interfaceIndexSubject { [index: number]: Person; [name: string]: Student; }
代码会报如下错误：
数字索引类型“Person”不能赋给字符串索引类型“Student”。
修改为如下代码就可以了：
interfaceIndexSubject {
[index: number]: Student;
[name: string]: Person; }
下面的代码也会报错：
- letter索引得到结果的类型，必须是Person类型或者它的子类型
interfaceIndexSubject { [index: number]: Student; [name: string]: Person; letter: string; }
3）接口的实现
接口除了定义某种类型规范之后，也可以和其他编程语言一样，让一个类去实现某个接口，那么这个类就必须明确去拥有这个接口中的属性和实现其方法：
从代码设计上，为什么需要接口?
当然，对于初次接触接口的人，还是很难理解它在实际的代码设计中的好处，这点慢慢体会，不用心急。
4）接口的继承
和类相似，接口也是可以继承接口来提供复用性
下面的代码中会有关于修饰符的警告，暂时忽略，后面详细讲解
// 定义一个实体接口 interface Entity { title: string; log(): void; } // 实现这样一个接口 class Post implements Entity { title: string; constructor(title: string) { this.title = title; } log(): void { console.log(this.title); } }
思考：我定义了一个接口，但是我在继承这个接口的类中还要写接口的实现方法，那我不如直接就在这个类中写实现方法岂不是更便捷，还省去了定义接口？这是一个初学者经常会有疑惑的地方。
从思考方式上，为什么需要接口?
- 我们从生活出发理解接口
- 比如你去三亚/杭州旅游, 玩了一上午后饥饿难耐, 你放眼望去, 会注意什么? 饭店!!
- 你可能并不会太在意这家饭店叫什么名字, 但是你知道只要后面有饭店两个字, 就意味着这个地方必然有饭店的实现 – 做各种菜给你吃；
- 接口就好比饭店/酒店/棋牌室这些名词后面添加的附属词, 当我们看到这些附属词后就知道它们具备的功能
- 在代码设计中，接口是一种规范；
注意：继承使用extends关键字
- 接口通常用于来定义某种规范, 类似于你必须遵守的协议, 有些语言直接就叫protocol；
- 站在程序角度上说接口只规定了类里必须提供的属性和方法，从而分离了规范和实现，增强了系统的可拓展性和可维护性；
interface Barkable { barking(): void; } interface Shakable { shaking(): void; } interface Petable extends Barkable, Shakable { eating(): void; }
接口Petable继承自Barkable和Shakable，另外我们发现一个接口可以同时继承自多个接口如果现在有一个类实现了Petable接口，那么不仅仅需要实现Petable的方法，也需要实现Petable继承自的接口中的方法：
- 注意：实现接口使用implements关键字
class Dog implements Petable { barking(): void { console.log(“汪汪叫”); } shaking(): void { console.log(“摇尾巴”); } eating(): void { console.log(“吃骨头”); } }
5）接口继承类
当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时，这个接口类型只能被这个类或其子类所实现（implement）。
当你有一个庞大的继承结构时这很有用，但要指出的是你的代码只在子类拥有特定属性时起作用。 这个子类除了继承至基类外与基类没有任何关系。 例：
class Control { private state: any; } interface SelectableControl extends Control { select(): void; } class Button extends Control implements SelectableControl { select() { } } class TextBox extends Control { } // Error: Property ‘state’ is missing in type ‘Image’. class Image implements SelectableControl { select() { } } class Location { }
在上面的例子里，SelectableControl包含了Control的所有成员，包括私有成员state。 因为state是私有成员，所以只能够是Control的子类们才能实现SelectableControl接口。 因为只有Control的子类才能够拥有一个声明于Control的私有成员state，这对私有成员的兼容性是必需的。在Control类内部，是允许通过SelectableControl的实例来访问私有成员state的。 实际上，SelectableControl就像Control一样，并拥有一个select方法。 Button和TextBox类是SelectableControl的子类（因为它们都继承自Control并有select方法），但Image和Location类并不是这样的。
若有收获，就点个赞吧
0 人点赞
