Typescript中的接口
js中接口是指方法的api
ts这里的接口是指一种数据结构,接口是用来描述这种数据结构的
通过interface来定义,
接口只用来定义(数据)结构,不要去实现,
当遇到一种复杂的数据的时候,我们可以通过接口来描述它的结构
我们将介绍三种接口:函数接口,对象接口,类接口
函数接口函数有三种方式:定义式,表达式,构造函数式
在函数的表达式中,会用一个变量来引用这个函数,在程序运行前,为了开辟空间,我们要定义接口,来描述它的结构
interface 函数名称 {
(arg:type, arg2?:type2):type
}
在函数中,函数的参数以及函数的返回值会出现数据,因此我们要定义它们的类型结构,我们要定义参数以及返回值的类型,不要定义函数体,因为函数体是函数的实现。
如果参数可有可无,后面添加?
如果函数有返回值,定义返回值类型
如果函数没有返回值,就是void。
对象接口对象也是一个复杂的数据,为了说明它的接口,我们要定义对象接口
在对象中,它的属性名称,方法名称属于结构
在对象中,它的属性值,方法体属于实现
我们在对象接口中,只定义接口:只定义属性名称和方法\ interface 接口名称 {
属性名称
方法的参数和返回值
}
如果属性名称或者方法可有可无,后面添加?
类接口有时候,为了说明类的结构,我们也要定义类的接口,定义类的接口跟定义对象接口一样
只定义属性和方法的结构,属性或者方法可有可无,后面添加?
interface 接口名称 {
属性名称
方法参数和返回值
}
类接口通常首字母大写,并且使用类接口的时候,要让类使用implements关键字,来实现这个接口。
此时实例化的时候,变量的类型可以类的类型,也可以是接口的类型
如果使用的是接口的类型,属性和方法会受到接口的限制(不存在的方法不能使用)
举例:
// // 函数接口
interface add {
// 第二个参数可有可无,我们参数后面添加?
(num1:number, num2?:number):number
}
// 定义函数表达式变量的类型
let addTow:add = function(num1:number, num2:number):number {
return num1 + num2;
}
console.log(addTow(10, 20))
// 只接收一个参数
let addOne:add = function(num1:number):number {
return num1 + 10
}
console.log(addOne(2))
// 对象接口
interface Star {
name:string;
getName():string;
// 可有可无的
getGirlFriend?():string;
}
// 定义名称
let zss:Star = {
name: '尼古拉斯赵四',
getName():string {
return this.name
},
// 可有可无的方法,可以定义
getGirlFriend():string {
return '赵丽颖'
}
}
console.log(zss)
console.log(zss.getName())
console.log(zss.getGirlFriend())
// 定义类的接口
interface Star {
name:string;
getName():string;
getGirlFriend?():string;
}
// 使用类接口
class MoveStar implements Star {
name:string;
constructor(name:string) {
this.name = name;
}
// 获取名称的方法
getName():string {
return this.name;
}
getGirlFriend():string {
return '杨幂'
}
// 获取年龄的方法
getAge():number {
return 50;
}
}
// 实例化
var zss:MoveStar = new MoveStar('周帅帅')
// var zss:Star = new MoveStar('周帅帅');
console.log(zss)
console.log(zss.getAge())
版权声明
本文仅代表作者观点,不代表博信信息网立场。