Typescript中的接口
source link: https://blog.51cto.com/u_13349380/5635021
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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())
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK