Typescript接口类型、接口继承接口...

接口是一种规范的定义，定义行为和动作的规范，定义了某一批类所需要遵守的规范，只规定这批类必须提供某些方法，类似于java，同时还增加了更灵活的接口类型，包括属性，函数，可索引和类，接口扩展等。

属性类型接口
ts中自定义方法传入参数对json进行约束：行为和动作的规范

function printLabel(labelInfo:{label:string}):void{
	console.log("printLabel")
}
printLabel({label:'张三'})

1. interface-对批量方法传入参数进行约束

// 传入对象的约束，属性接口
interface FullName{
	firstName:string;
	second:string;
}
function printName(name:FullName){
	// 必须传入对象 ：firstName secondName :string类型
	console.log(name.firstName + name.secondName)
}

printName({	// 必须有FullName中的属性
	firstName:'张'，
	secondName:'三'
})
// 或
// 含有FullName中的属性
var obj = {
	age:20,
	firstName:'张'，
	secondName:'三'
}
printName(obj)

1. 可选属性：参数的顺序可以不一样

interface FullName{
	flirstName:string;	
	secondName?:string;
}

3. request接口

// 如：request请求接口
$.ajax({
	type:"GET",
	url:"test.json",
	data:{username:$("#username").val(),content:$("#content").val()},
	dataType:"json"
})

// 属性类型接口举例：原生js封装
interface Config{
	type：string;
	url：string;
	data?：string,
	dataType:string
}
function ajax(config:Config){
	let xhr =new XMLHttpRequest()
	xhr.open(config.type,config.url,true) // true:异步
	xhr.send(config.data)
	xhr.onreadyStatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			console.log("success")
			if(config.dataType == 'json'){
			 	JSON.parse(xhr.responseText)
			}else{
				console.log(xhr.responseText)
			}
		}
	}
}
ajax({
	type:'get'，
	url:'http://www.baidu.com'，
	data:'name = zhangsan'
	dataType:'json'
})

函数类型接口
对方法传入的参数和返回值以及返回值进行约束(批量约束)
加密的函数类型接口

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','zhangsan'))

可索引接口
数组、对象的约束，不常用

1. 对数组的约束

var arr:number[] = [22342,2313]
var arr1:Array<string>=['111','222']

interface UserArr{
	[index:number]:string
}
var arr:UserArr = ['aaaa','bbbb']
console.log(arr[0])

2.对对象的约束

interface UserObj{
	[index:string]:string
}
var arr:UserObj = { name:'20'}

类类型接口
对类的约束，和抽象类有点相似，也有点像多态
父定义标准，子类按照标准输出对应的属性方法

interface Animal{
	name:string;
	eat(str:string):void;
}
// 不是继承；implements实现上面的接口
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('吃猫粮')

接口扩展

1. 接口可以继承接口

interface Animal{
	eat():void;
}
// 扩展接口，接口继承
interafce Person extends Animal{
	work():void;
}
class Web implements Person{
	public name:string;
	constructor(name:string){
		this.name = name
	}
	eat(){
		console.log(....)
	}
	work(){
		console.log(...)
	}
}
var w =new Web()
w.work()

2. 类接口并继承接口

// 在以上代码的基础上改造
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{
	public name:string;
	constructor(name:string){
		super(name)
	}
	eat(){
		console.log(....)
	}
	work(){
		console.log(...)
	}
}
var w =new Web("人物")
w.coding("写代码")