6、接口

接口的作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口之定义了方法，但没有实现，具体的实现有继承它的类来完成。

typescript中的接口主要有以下:

• 属性类接口
• 函数类型接口
• 可索引接口
• 类类型接口

属性类接口

function printLabel(labelledObj: { label: string }) {
  console.log(labelledObj.label);
}

let myObj = { size: 10, label: "Size 10 Object" };
printLabel(myObj);

类型检查器会查看printLabel的调用。printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。

使用属性接口改写上面的例子:

interface LabelledValue {
  label: string;
  width?: number;      //可选属性
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

//写法一
let myObj = {size: 10, label: "Size 10 Object"};   //这样写只要包含必须要有的属性即可
printLabel(myObj);

//写法二
printLabel({label: "Size 10 Object"});     //这样写对象中的属性必须和接口中的保持一致

直接将对象传给函数和将对象赋值给变量后再传入是不一样：

• 直接传对象给函数：对象中的属性必须跟接口中的保持一致
• 将对象赋值给变量后再传入：对象中可以含有不存在接口中的属性

解决上面直接传对象给函数必须和接口中的属性保持一致的问题：添加一个可索引的类型

interface LabelledValue {
  label: string;
  width?: number;      //可选属性
  [propName:string]: any;
}

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。

interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

函数类型接口

函数类型接口就是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}
console.log(mySearch("121234234","12")); //true

mySearch方法里的参数名可以不跟接口中的保持一致,但是顺序要一致。

函数可以省去参数类型的定义和返回类型的定义：

mySearch = function(source, subString) {
  let result = source.search(subString);
  return result > -1;
}
console.log(mySearch("121234234","12")); //true

可索引接口

可索引类型具有一个索引签名，它描述了对象索引的类型，还有相应的索引返回值类型。

//对数组的约束
interface StringArray {
  [index: number]: string;
}

let myArray: StringArray = ["Bob", "Fred"];

//对对象的约束
interface obj {
  [index: number]: string;
}

let myArray: obj = {name:'张三'};

类类型接口

对类的约束，跟抽象类有点类似。用法与C#或Java里的接口的基本一样

interface Animal{
    name:string;
    eat(str:string):void;
}
class Dog implements Animal{
    name:string = "";
    constructor(){}
    eat(aName:string){
        console.log(aName + '吃肉');
    }
}
let d = new Dog();
d.eat("小黑");   //小黑吃肉

继承接口

和类一样，接口也可以相互继承。

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

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

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