一. 接口(interface)是什么

接口就是用代码描述对象必须有什么属性（包括方法），可以理解为”要求”；

是用来描述对象的

举例：

例一：

1
2
3
4
5
6

interface Human{
    name : string,
    age : number
}
let lisle:Human = {name:'lisle',age : 20}

例二

1
2
3
4
5
6
7
8
9
10
interface Human{
    name : string;
    age : number;
    say(word:string):void;
    shape: Shape;
}
interface Shape{
    body:string;
    head : string;
}

二. 接口(interface)的特性

interface描述只读属性
1
2
3
4
interface Human{
    readonly sex : string;
    name : string
}
interface描述可选属性
1
2
3
4
5
interface Human{
    readonly sex : string;
    name : string;
    play?: string
}
如果传了interface之外的属性怎么办

方法一. 使用类型断言

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

interface Human{
    name : string;
    age : number;
}

let zhangsan:Human = {
    name : '',
    age : 20,
    opacity : 1
} as Human

let zhangsan:Human = <Human>{
    name : '',
    age : 20,
    opacity : 1
}

方法二. 使用索引签名

1
2
3
4
5
interface Human{
    name : string;
    age : number;
    [propName:string] : any //这儿必须是any，否则会和上面两个属性冲突
}

三. 接口（interface）的用法

修饰对象

1
2
3
4
5
6
7
interface Obj{
    name : string;
    age : number;
    say(word:string):void;
}

let obj:Obj = {name : 1,age : 2}

修饰函数

接口修饰函数的时候,接口里面是没有函数名的;

注意下和修饰对象，然后对象有个属性是函数的区别

1
2
3
4
5
6
7
8
9
10
11
12
interface SearchFunc{
    (source:string,subString:string):boolean
}

var mySearch : SearchFunc = function(source:string,subString:string){
    let result = source.search(subString);
    if(result != -1){
        return true;
    }else{
        return false;
    }
}

当然，函数类型一般不会这么写,一般还是下面的写法

1
2
3
let fn:(name:string)=>number = function(name:string){
    return name.length;
}

修饰数组

1
2
3
4
5
6
interface StringArray{
//这儿的number是索引类型
    [index:number]:string;  
}

var myArray:StringArray = ["ime","lily"];

当然，数组一般不会这么写；会采用Array<number>或者number[]

修饰类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
interface ClockInterface{
    currentTime : Date;
    setTime(d:Date):string
}  

class Clock implements ClockInterface{
    currentTime : Date;
    setTime(d:Date){
        this.currentTime = d;
        return 'ready';
    }
    constructor(h:number,m:number){
        
    }
}