TS笔记 - 04接口 interface

接口

接口是一种规范的定义，它定义了行为和动作的规范。包括属性、函数、可索引和类等。

模拟 ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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.readyState == 4 && xhr.status == 200){
			console.log('success');
		}
	}
}
Ajax({
	type:'get',
	url:'/test',
	dataType:'json'
})

1、属性接口 对json约束 对批量方法进行约束

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface FullName{
	first:string;
	second:string;
	age?:number // 可选参数
}
function printName(name:FullName){
	console.log(name.fitst);
}

let obj = {
	first:'zhangsan',
	second:'lisi'
}
printName(obj);

2、函数类型接口

1
2
3
4
5
6
7
8

interface encrypt{
  (key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
	return key+value;
}
md5('name','zhangsan');

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var arr:number[]=[123,123]
var arr:array<number>=[123,123]
// index 索引值

// 对数组约束
interface UserArr{
 	[index:number]:string
}
var arr:UserArr=['aaa',123] //error
var arr:UserArr=['aaa','123123'] //success

// 对对象约束
interface UserArr{
 	[index:string]:string
}
var arr:UserArr={name:'zhangsan'}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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+'eat meal');
	}
}

var d = new Dog('小黑');
d.eat();

5、接口扩展 接口可以继承接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
interface Animal{
 	eat():void;
}
interface Penson extends Animal{
 	work():void;
}
interface Programmer{
	name:string,
	constructor(name:string){
		this.name = name;
	}
	codding(code:string){
		console.log(this.name+code);	
	}
}
//即可以继承接口也可以实现接口
class Web extends Programmer implements Person{ 
	name:string,
	constructor(name:string){
		super(name);
	}
	eat(){
		console.log(this.name+'吃米饭');
	}
	work(){
		console.log(this.name+'写代码');
	}
}
var d = new Web('小李');
d.eat(); //小李吃米饭  //实现
d.work(); //小李写代码  //实现
d.codding('TS'); //小李TS  //继承