typescript的接口使用详细说明（含原生封装ajax例子，易懂）

typescript的接口

1. 接口的作用：
   在面向对象的编程中，接口是一种规范的定义，它定义行为和动作的规范，在程序设计里面，接口起到了一种限制和规范的作用。接口定义了某一批类所需要的遵循的规范，接口不必关心这些类的内部状态数据，也不关心这些类里面的方法的实现细节，它只规定了这批类里必须提供某些方法，提供这些方法的类就可以，满足实际需要。typescript中的接口类似于java，同时还增加了灵活的接口类型，包括属性、函数、可索引和类等。（定义标准）

2. 属性接口： 对json的约束

   	//ts中定义方法
   	//function printLabel():void {
   	//	console.log("printLabel");
   	//}
   	//printLabel();
   
   	//ts中定义方法传入参数
   	//function printLabel(label:string):void {
   	//	console.log("printLabel");
   	//}
   	//printLabel("哈哈哈");
   
   	//ts中定义方法传入参数对json进行约束
   	//function printLabel(labelInfo:{label:string}):void {
   	//	console.log("printLabel");
   	//}
   	//printLabel("哈哈哈");//报错
   	//printLabel({name:"张三"});//报错
   	//printLabel({label:"张三"});//printLabel（正确的写法）
   

3. 对批量方法传入参数进行约束

   	//就是传入对象的约束   属性接口
   	interface FullName{
   		firstName:string; //注意分号（;）结束
   		secondName:string;
   	}
   	function printName(name:FullName){
   		//必须传入对象  firstName   secondName
   		console.log(name.firstName + "--" + name.secondName)
   	}
   	//printName("123");  //ts报错
   	//printName({    //ts报错 这样的写法必须只有firstName，和secondName
   	//	age:20,     
   	//	firstName:"张",
   	//	secondName:"三"
   	//})
   	var obj = {   //这样的写法必须包含firstName，和secondName
   		age:20,     
   		firstName:"张",
   		secondName:"三"
   	}
   	printName(boj)
   

   	//接口：行为和动作的规范，对批量方法进行约束
   	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 + info.age)  //info.age（ts报错）
   	}
   	var obj = {   //这样的写法必须包含firstName，和secondName
   		age:20,     
   		firstName:"张",
   		secondName:"三"
   	};
   	printName(boj);
   	
   	var info= {   //这样的写法必须包含firstName，和secondName
   		age:20,     
   		firstName:"张",
   		secondName:"三"
   	}
   	printName(info);
   

4. 接口：可选属性(原生封装ajax思想)

   	interface FullName{
   		firstName:string;
   		secondName:string;
   	}
   	function getName(name:FullName){
   		console.log(name)
   	}
   	//参数的顺序可以不一样，但是内容必须有firstName，secondName，否则报错
   	getName({
   		secondName:"六",
   		firstName:"赵"
   	})
   

   	interface FullName{
   		firstName:string;
   		secondName?:string;// ? 可传可不传
   	}
   	function getName(name:FullName){
   		console.log(name)
   	}
   	getName({
   		firstName:"赵"
   	})
   

   	//例子：原生封装ajax
   	//$.ajax({
   	//	type:"GET",
   	//	url:"test.json",
   	//	data:{user:$("#username").val(),content:$("#content").val()},
   	//	dataType:"json"
   	//})
   
   	interface Config{ //接口：行为和动作的规范，对批量方法进行约束
   		type:string;
   		url:string;
   		data?:string;
   		dataType:string;
   	}
   	function ajax(config:Config){
   		var xhr = new XMLHttpRequest();
   		xhr.open(config.type,config.url,true);//异步
   		xhr.send(config.data);
   		xhr.onreadystatechange = function(){
   			if(xhr.readState==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...",//api接口
   		dataType:"json"
   	})
   

5. 函数类型接口：对方法传入的参数 以及返回值进行约束 批量约束

   	//加密的函数类型接口
   	interface encrypt{
   		(key:string,value:string):string;
   	}
   		
   	var md5:encrypt = function(key:string,value:string):string{
   		//模拟操作
   		return key + value;
   	}
   	console.log(md5("name","zhangsan"))
   
   	var sha1:encrypt = function(key:string,value:string):string{
   		//模拟操作
   		return key + "--" + value;
   	}
   	console.log(sha1("name","lisi"))
   

6. 可索引接口：数组、对象的约束 （不常用）

   	//定义数组方式
   	//var arr:number[] = [12,34,56]
   	//var arr:Array<string> = ["111","222"]
   	
   	//可索引接口 对数组的约束
   	interface UserArr{
   		[index:number]:string
   	}
   	var arr:UserArr=["aaa","bbb"];
   	//var arr:UserArr=[123,"bbb"];//错误写法，上面规定里面是string
   	console.log(arr[0]); //aaa
   

   	interface UserObj{
   		[index:string]:string
   	}
   	var arr:UserObj=["123","456"]
   	var arr:UserObj={name:"张三"}
   	//var arr:UserObj={name:"张三",age:10}//报错
   

7. 类的类型接口：对类的约束 和 抽象类有点相似

   	interface Animal{  //父定义标准，子类按照标准输出
   		name: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("鱼");//小花吃鱼
   

8. 接口的扩展：接口可以继承接口

   	interface Animal{
   		eat():void;
   	}
   	interface Person extends Animal{
   		work():void;
   	}
   	class web implements Person{
   		public name:string;
   		constructor(name:string){
   			this.name=name
   		}
   
   		eat(){
   			console.log(this.name+"吃馒头")
   		}
   
   		work(){
   			console.log(this.name+"工作")
   		}
   	}
   	var w = web("小李")
   	w.eat()//小李吃馒头
   	w.work()//小李工作
   

   	interface Animal{
   		eat():void;
   	}
   	interface Person extends Animal{
   		work():void;
   	}
   	class Programmer{
   		public name:string;
   		constructor(name:string){
   			this.name=name
   		}
   		go(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 = web("小李")
   	w.eat()//小李吃馒头
   	w.work()//小李工作
   	w.go("写代码")//小李写代码