TypeScript之interface接口（五）

最新推荐文章于 2024-08-05 00:19:17 发布

原创最新推荐文章于 2024-08-05 00:19:17 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #接口

typescript 专栏收录该内容

6 篇文章

订阅专栏

本文深入讲解TypeScript中的接口定义及使用方法，包括接口的基本概念、包含函数的接口、接口对类的约束、接口的继承等内容。

TypeScript之接口的定义和使用

一.接口的定义
二.接口初识
三.包含函数的接口
四.接口对类的约束
五.接口的继承

上一篇：TypeScript之类，抽象类，继承，多态（四）

在前面创建数据类型我们简单提到了接口，使用接口在约束一组数据结构来定义指定的对象。这里来详细介绍一下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之泛型（六）

到底咯。。。。。。。。。。。。。。。。