《Typecript 入门教程》 3、接口

转载：《TypeScript 中文入门教程》 3、接口

介绍

TypeScript的核心原则之一是对值所具有的shape进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。

在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

接口用法一：方法的参数的类型声明

当你的接口用作一个方法的类型参数声明时，当你在调用此方法时，你要满足此接口的参数要求

下面代码中，Iperson接口作为了Person类构造函数内的变量类型声明，要求必须传入属性为一个包含name、sex的json数组

interface Iperson{
    name:string;
    sex:string;
}

class Person{
    constructor(public config:Iperson){

    }
}

let a=new Person({
    name:"chenli",
    sex:"man"
});

接口用法二：参数类型中的可选属性

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号。

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

interface Animals{
    color?:string;
    size?:number;
}

function creatAnimal(ani:Animals):{color:string;size:number}{
    var anitemp={
        color:"blue",
        size:10
    }
    if(ani.color){
        anitemp.color=ani.color;
    }
    if(ani.size){
        anitemp.size=ani.size;
    }
    return anitemp;
}

var myAnimal=creatAnimal({color:"white"});

接口用法3.使用接口定义函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface SearchFunc{
    (source:string,subString:string):boolean;
}

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

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量。对于函数类型的类型检查来说，函数的参数名不需要与接口里定义的名字相匹配。 比如，我们使用下面的代码重写上面的例子：

var mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  var result = src.search(sub);
  if (result == -1) {
    return false;
  }
  else {
    return true;
  }
}

 

接口用法4:class类型。接口和类配合，通过子类实现接口完成具体的应用，给出具体的框架规范

interface ClockInterface{
    currentTime:Date;
}

class Clock implements ClockInterface{
    // 类实现了接口，那么类里面必须复写接口内的参数
    currentTime:Date;
    constructor(h:number,m:number){

    }

}

你也可以在接口中描述一个方法，在类里实现它，如同下面的setTime方法一样：

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

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