TypeScript接口
1.创建接口(使用接口来规范类型)
function printLabel(labelObj:{label:string}){
console.log(labelObj.label);
}
var myObj = {label:'hello'};
printLabel(myObj);//结果是hello
interface LabelValue{
label:string;
}
function printLabel(labelObj:LabelValue){
console.log(labelObj.label);
}
var myObj = {label:'hello world'}
printLabel(myObj);//hello world
// 两种方式的结果是一样的,使用接口更加灵活一些
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2.可选属性
//并不是接口中的每一个属性都会用到
interface USB{
name?:string;
age:number
}
function printUSB(pu:USB){
console.log(pu.name);
console.log(pu.age);
}
var my = {name:'金士顿',age:100}
printUSB(my);
var my1 = {age:100}
printUSB(my1);//该结果中没有name,它是可选属性,编译不会报错,但是输出的会有undefined,并没有给name赋值
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
3.函数类型
//接口是非常强大,可以描述javascript的任何对象,当然也可以描述一个函数对象
interface SearchFunc{
(source:string,subString:string):boolean;
}
var mySearch:SearchFunc;
mySearch = function (src:string,sub:string) {
var result = src.search(sub);
if(result!=-1)
return true;
else return false;
}
//针对于类型的检查,不是类型的名称src:string,sub:string
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
4.数组类型
interface StringArray{
[index:number]:string;
}
var myArray:StringArray;
myArray = ['zhaodong','xy'];//规范了类型,所填的值必须是字符串类型,其他的编译报错
alert(myArray[1]);
1
2
3
4
5
6
2
3
4
5
6
5.Class类型
interface ClockInterface{
currentTime:Date;
setTime(d:Date)
}
class Clock implements ClockInterface{
currentTime:Date;
setTime(d:Date){
this.currentTime = d;
}
constructor(h:number,m:number){}
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
6.继承类型
interface Shape{
color:string;
}
interface PenStroke{
penWidth:number;
}
interface Square extends Shape,PenStroke{
sideLength:number;
}
var s = <Square>{};
s.color = 'blue';
s.sideLength = 10;
s.penWidth=19;
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
7.混合类型
interface Counter{
interval:number;
reset():void;
(start:number):string;
}
var c:Counter;
c(10);
c.reset();
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
