/*
1、属性接口
2、函数类型接口
3、可索引接口
4、类类型接口
5、接口扩展
*/
接口的作用:在面向对象变成过程当中,接口是一种规范的定义,它定义了行为和规范,在程序设计里面,接口起到了限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现,它规定这批类里面必须提供某些方法,提供这些方法的类就可以满足实际需要,typesript中的接口类是于java,同时还增加了更加灵活的接口类型,包含属性、函数、可索引、和类等。
定义标准。
1、属性接口 对json的约束
interface
ts中定义方法
function PrintLabel():void { console.log('PrintLabel'); } PrintLabel();
ts中定义方法传入参数
function PrintLabel(label:string):void { console.log(label); } PrintLabel('hahah')
ts中定义方法传入参数对json进行约束
function PrintLabel(lableInfo:{label:string}):void { console.log(lableInfo.label); } PrintLabel('hahah');//错误写法 PrintLabel({name:'hahah'});//错误写法 PrintLabel({label:'hahah'});//正确写法
// 对批量方法进行约束
// 就是对传入属性的约束-属性接口
interface Fullname{ firstName:string; secondName:string; } function printName(name:Fullname) { console.log(name.firstName+'---'+name.secondName); } printName('123456');//错误写法 printName({ firstName:'张', secondName:"三", age:20 });//报错 // 只能有要传入的属性 printName({ firstName:'张', secondName:"三", }); // 定义传入 传入参数必须包含firstName secondName let obj ={ firstName:'张', secondName:"三", age:20 } printName(obj);
// 对批量方法进行约束
interface Fullname{ firstName:string; secondName:string; } function printName(name:Fullname) { // 必须传入对象 firstName、secondName console.log(name.firstName+'---'+name.secondName); } function printInfo(info:Fullname) { // 必须传入对象 firstName、secondName console.log(info.firstName+'---'+info.secondName); } let obj ={ firstName:'张', secondName:"三", age:20 } printName(obj); let info ={ firstName:'李', secondName:"四", age:22 } printName(info);
可选参数
interface Fullname{
firstName:string;
secondName?:string;//可选属性
}
function getName(name:Fullname) {
console.log(name);
}
getName({
firstName:"firstName"
})
ajax的例子
/*
$.ajax({
type:"get",
url:"test.json",
data:{username:$("#userName").val(),content:$("#content").val()},
dataType:"json"
});
*/
interface Config{ type:string, url:string, data?:string, dataType:string } // 原生js封装ajax请求 function ajax(config:Config) { var xhr = new XMLHttpRequest(); xhr.open(config.type,config.url,true); xhr.send(config.data); xhr.onreadystatechange = function() { if(xhr.readyState===4&& xhr.status===200){ console.log('成功'); if(config.dataType === 'json'){ console.log(JSON.parse(xhr.responseText)); }else{ console.log(xhr.responseText); } } } } ajax({ type:'get', url:'http://a.itying.com/api/productlist', dataType:'json' })
2、函数类型接口
// 对方法传入的参数以及返回值进行约束 批量约束
// 加密的函数类型接口
interface encrypy{
(key:string,value:string):string;
}
var md5:encrypy=function(key:string,value:string):string {
return key+value;
}
console.log(md5('name','zhangsan'));//namezhangsan
var sha1:encrypy=function(key:string,value:string):string {
return key+'----'+value;
}
console.log(sha1('name','lisi'));//name----lisi
3、可索引接口
ts定义数组的方式
var arr:number[]=[1,2,3]; var arr1:Array<string>=['1','2','3'];
对数组的约束
interface UserArr{
[index:number]:string
}
var arr:UserArr=['aaa','bbb'];
console.log(arr[0]);//'aaa'
对对象的约束
interface UserObj{
[index:string]:string
}
var arr:UserObj = {name:'张三'};
4、类类型接口
对类的约束和抽象方法类似
interface Animal{ names:string; eat(str: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();//小黑吃粮食 class Cat implements Animal{ name:string; constructor(name:string){ this.name = name; } eat(food:string){ console.log(this.name+'吃'+food); } } var c=new Cat('小花'); c.eat('老鼠');//小花吃老鼠
5、接口扩展
interface Animal{
eat():void;
}
interface Person extends Animal{
work():void;
}
class Programmer{
public name:string;
constructor(name:string){
this.name=name;
}
coding(code:string){
console.log(this.name+code);
}
}
class Web extends Programmer implements Person{
constructor(name:string){
super(name);
}
eat(){
console.log(this.name+'喜欢吃馒头');
}
work(){
console.log(this.name+'写代码');
}
}
var w=new Web('小李');
w.eat();
w.work();