typescript中的接口
接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用，接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要，typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等
接口也是一种定义标准，分为一下几种：
- 属性类接口
- 函数类型接口
- 可索引接口
- 类类型接口
- 接口扩展
属性类接口
我们看一下ts中的自定义方法
//ts中定义方法 function fun(){ console.log("fun") } fun()
//ts中定义方法传入参数 function fun(label:string){ console.log("fun") } //调用时必须传入一个字符串 fun("fun")
//ts中自定义方法传入参数对json约束 function fun(label:{fun:string}){ console.log("fun") } fun("fun") //错误 //调用时必须传入一个对象 fun({name:"小明"})//错误 fun({fun:"小明"}) //正确
我们看一下接口的使用
对传入的对象进行约束
//传入对象的约束，属性接口 interface num{ first:string; //注意以;结尾 second:string; } function fun(name:num){ //必须传入对象，对象里面必须有first，second console.log(name.first); console.log(name.second) } //fun("123")//错误 // fun({ // //age:18,//错误，不可以传入不在num中的属性 // first:"小明", // second:"男" // }) var obj=({ //传入的参数必须包含first和second age:18, first:"小明", second:"男" }) fun(obj)
编译后的js文件
对批量方法进行约束
interface num{ age:number; first:string; //注意以;结尾 second:string; } function fun(name:num){ //必须传入对象，对象里面必须有first，second console.log(name.first); console.log(name.second) } function fun2(name2:num){ console.log(name2.first); console.log(name2.second) console.log(name2.age) }
//参数的顺序可以不一样,但是必须的有num中的属性
var obj=({ //传入的参数必须包含first和second age:18, first:"小明", second:"男" }) fun(obj) fun2(obj)
编译后的js文件
可选属性
interface num{ first:string; second?:string; } function fun(name:num){ console.log(name) } //参数的顺序可以不一样但是必须的有num中的属性 fun({ first:"小明", // second:"小红" //此时这个属性可传可不传 })
我们可以使用接口封装一个ajax请求
我们一般写ajax请求这样写
$.ajax({
type:"GET",
url:"test.json",
data:{username:$("#username")},
datatype:"json"
})
我们使用接口封装了之后可以这样写
//原生js封装的Ajax请求
interface ajax{ type:string, url:string, data?:string, datatype:string } function ajax(ajax:ajax){ var xhr=new XMLHttpRequest(); xhr.open("get",ajax.url); xhr.send(ajax.data) xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ console.log("success") if(ajax.datatype=='json'){ JSON.parse(xhr.responseText) }else{ console.log(xhr.responseText) } } } } ajax({ type:'get', data:"name=张三", url:"http://www.baidu.com", datatype:"json" })
函数类型接口
// 函数类型接口，对方法传入的参数，以及返回值进行约束 //加密的函数类型接口 interface entry{ (key:string,value:string):string; } var a:entry=function(key:string,value:string):string{ //模拟操作 return key+value; } console.log(a("name:","张三"))
注意：这里面的类型要一一对应
编译后的js文件
可索引接口
ts定义数组的方式
//ts定义数组的方式 var arr:number[]=[1,2,3,4,5]; var arr1:Array<string>=["1","2","3"]
可索引接口第一种写法：
对数组对象的约束(不常用)
interface arr{ [index:number]:string //对数组约束的接口，下标为number。value为string } var arr1:arr=['1','2','3']
//var arr1:arr=[1,2,3]//错误 console.log(arr1[0],arr1[1],arr1[2]);
编译后的js文件
对对象的约束
interface obj{ [index:string]:string } var obj1:obj={name:'20'} console.log(obj1)
编译后的js文件
类类型接口
对类的约束，和抽象类有点相似
interface animal{ name:string; eat(name:string):void; } class dog implements animal{ name:string; constructor(name:string){ this.name=name } eat(){ console.log(this.name) } } var d=new dog("大黄") d.eat()
编译后的js文件
接口扩展
接口可以继承接口
interface animal{ eat():void } interface person extends animal{ work():void; } class dog implements person{ name:string; constructor(name:string){ this.name=name } eat(){ console.log(`${this.name}在吃饭`) } work(){ console.log(`${this.name}在工作`) } } var d=new dog("大黄") d.eat() d.work()
编译后的js文件
interface animal{ eat():void } interface person extends animal{ work():void; } class set{ name:string constructor(name:string){ this.name=name } code(){ console.log(`${this.name}在写代码`) } } class dog extends set implements person{ constructor(name:string){ super(name) } eat(){ console.log(`${this.name}在吃饭`) } work(){ console.log(`${this.name}在工作`) } } var d=new dog("大黄") d.eat() d.work() d.code()
编译后的js文件
