TypeScript 中的接口（interface）

TypeScript 中的接口可分为：

1.属性类型接口
2.函数类型接口
3.可索引类型接口
4.类类型接口
5.继承接口(接口扩展)
6.泛型接口

之前的文章 TypeScript 基础类型和接口（interface）里面介绍了属性类接口和函数类接口，简单来讲属性类接口就是对 JavaScript 对象的约束，函数类接口就是一个函数输入参数和返回值的约束。接下来来看看剩下的几个：

一、可索引类型接口（非常的不常用）

可索引类型接口简称可索引接口，只对数组和对象有用。

// 数组式可索引接口
interface MyArr{
    [index:number]:string;
}
var arr:MyArr = [ "a" , "b" , "c"];
console.log(arr[0]);

//对象式可索引接口
interface MyObj{
    [index:string]:string;
}
var obj:MyObj = {name:"Condor Hero"};
console.log(obj["name"]);

最关键的地方是 [index: number]: string; 我们定义了一个索引签名 index（索引签名可自定义为 x 也行） ，索引类型为 number，TypeScript 只支持两种索引类型：字符串和数字。索引返回值类型为 string。尤其当索引值的类型为 number 时，表示数组，为 string 类型时表示对象。

不常用的原因其实也很简单，这玩意压根就是对数组或对象进行约束，基本类型可比这个好用多了，顺便讲一下，对象索引是不是有点眼熟，我改写下：

//对象式可索引接口
interface MyObj{
    age:number
    [x:string]:any;
}
var obj:MyObj = {name:"Condor Hero",age:18};
console.log(obj["name"]);

没错就是属性类型接口中对接口进行扩展。

二、类类型接口

类类型接口顾名思义就是对类的约束和抽象类有点相似。主要功能就是强制一个类去符合某种契约。特别的像类继承的手动版，类通过 extends 继承 super 塑造完成 this ，直接可访问被继承类的属性和方法，类类型接口通过 implements (原译实施) 继承，必须手动初始化完成类似类中 super 的过程。

interface Animal {
    name: string;
    eat(food:string):any
};
class Dog implements Animal {
    name: string;
    eat(food:string){
        console.log(this.name + "爱吃" + food);
    }
    constructor(name:string){
        this.name = name;
    }
};
var huihui = new Dog("灰灰");
huihui.eat("狗粮");

接口只能描述类的公共部分，而不能描述公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。

三、继承接口

继承接口又叫接口的扩展，通过 extends 来实现的，基本和 ES6 中的类继承差不多是一样，接口也可以相互继承。

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}
//类型断言
let square = {};
square.color = "blue";
square.sideLength = 10;
//类型断言
var b = {} as Square;
b.color = "white";
b.sideLength = 66;

var a:Square = { color : "red" , sideLength : 999 };

console.log(a);
console.log(b);
console.log(square);

一个接口可以继承多个接口，用英文逗号来分割。

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = {};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

思考：如何写个混合类型 的接口要求包含属性类型和函数类型？
提示：要想实现题目要求还必须的用到类型断言，还必须的先做函数类型，后做属性类型，答案如下。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

还有一个难点：接口继承类，通过一个例子来讲明：

四、泛型接口

严格来讲这小节属于泛型而不属于接口。为了好记就在这里写了，有两种写法：

1. 通用型接口泛型

interface Animal{
    name:T;
};
let dog:Animal = { name:"旺财" };

2. 函数接口泛型

interface Animal{
    (name:T):T
};
let dog:Animal = function(name:T):T {
    return name;
}
console.log(dog("旺财"));