在前面创建数据类型我们简单提到了接口,使用接口在约束一组数据结构来定义指定的对象。这里来详细介绍一下TS中的接口。
一.接口的定义
在各种开发语言里基本都有interface接口的定义,这个接口与开发中的API接口不是一个概念。
interface接口定义了某一批类所需要遵守的规范,时一中数据格式的约束。接口不关心内部属性的数据,也不关心内部方法的实现细节,它只规定这批类里必须提供某些方法,提供这些方法的类就可以满足实际需要。
二.接口初识
既然说了接口是一种规范,那么就可以用它来实现一种参数约定。定义一个接口,让函数接受这个参数,那么就相当于对这个参数进行了约定,只能传入满足这个接口约束的参数。下面来实现一下:
//定义一个接口 包含了Name属性,类型为string;Age属性,类型为number。
interface Info {
Name: string;
Age: number;
}
//定义一个方法来接受Info接口的参数
getInfo(info: Info) :void{
console.log(`姓名:${info.Name};年龄:${info.Age}`);
}
//传入的参数必须包含Name(string)、age (number)属性且类型要与定义的相同。
const params = {
Name: "狗蛋",
Age: 18,
hobby: "英雄联盟"
};
//调用方法并传参
getInfo(params); //正确 姓名:狗蛋;年龄:18
// getInfo("123");//错误
接口里属性还有可选属性,任意属性,只读属性等定义,在之前的接口定义对象中讲到过,这里就不再赘述了。
三.包含函数的接口
如果在接口中定义函数,那么有两种情况:
1.如果在接口中定义一个匿名函数,则这个接口就只能用来约束函数了。
//在接口中定义一个匿名函数
interface Person{
(name: string, age: number): string;
}
//这个接口只能用来约束一个函数 参数为name和age,返回值类型为string
let getInfo:Person = function(name:string , age:string){
console.log(`姓名:${name};年龄:${age}`);
}
2.如果在接口中定义的是非匿名函数,则是用来约束对象和类的。下面是约束对象的例子,约束类单独拿出来说。
//在接口中定义一个属性和一个函数
interface Person{
name:string;
eat(food:string):string;
}
//这个接口可以用来约束对象和类
//这里其实就是我们在对象定义中讲到的用接口定义对象的写法
let obj:Person{
name : '狗蛋',
eat(food:string){
return `${this.name}吃${food}`
}
}
//调用对象的方法
obj.eat("干饭") //狗蛋吃干饭
至于为什么会出现这两种情况,想不明白的就给自己一巴掌再想。如果还是想不明白就再给自己一巴掌。
四.接口对类的约束
在上面Person这个接口中,也可以用来约束类,接口约束类和抽象类有点相似(有点区别是抽象类中的抽象方法不能有函数体)。接口来约束类这也是对接口的实现,实现接口使用implements关键字来定义。
//Person接口
interface Person{
name:string,
eat(food:string):string
}
//定义一个Student类实现Person这个接口 类中约束了name属性和eat方法
class Student implements Person {
name: string;
constructor(name: string) {
this.name = name;
}
eat(food: string) {
console.log(this.name + "吃" + food);
}
}
//实例化类
let s = new Student("狗蛋")
s.eat("干饭") //狗蛋吃干饭
五.接口的继承
接口继承就是说接口可以通过其他接口来扩展自己。使用extends来实现继承
Typescript 允许接口继承多个接口。
//Person接口
interface Person{
name:string,
age:number
}
//定义Student接口继承Person接口
interface Student extends Person{
rank:number
}
//Student接口有自己的rank属性约束,并且继承了Person的属性约束
let s:Student = {
name:"学霸",
age:16,
rank:1
}
接口的多继承:一个接口可以同时继承多个接口,多个接口之间使用 , 隔开。比如这样:
//Student接口继承 Person,Child,Man这三个接口
interface Student extends Person,Child,Man{
rank:number
}
下一篇:TypeScript之泛型(六)
到底咯。。。。。。。。。。。。。。。。