Day16-TypeScript(TS)在类别(Class)实作介面(Interface)

今天要来介绍类别实作介面，
介面型别我觉得很大的一个优势是可以重复使用，
因此我们就来说说这个吧。

什麽时候可以共用相同的介面型别呢？

传入的参数相同，透过不同函式得到某个共同所需的值就可以拿出来当介面型别共用了

举例来说，
我要取得一个长方形的面积，
那麽我就必须传入长、宽的参数，
透过长x宽的函式，
得到正方形的面积。

再来，
我要取得一个三角形的面积，
那麽我就必须传入长、宽的参数，
透过长x宽/2的函式，
得到三角形的面积。

可见要取得长方形和三角形的面积，
都需要传入长、宽的参数，
并透过各自的函式，
来取得面积。

使用范例

程序码范例如下，

首先宣告一个Shape介面型别，
使用介面来定义函式型别，如下；

interface Shape {
    (w: number, h: number): number;
}

其中，
(w: number, h: number)为传入的参数与型别，
冒号後面的number为传出资料的型别。

类别实作介面 - 长方形(Rectangle)

那麽先以**长方形(Rectangle)**为例，

//类别实作介面
class Rectangle implements IShape {

    //属性(Property)
    width: number;
    height: number;

    //建构函式(Constructor)
    constructor(w: number, h: number) {
        this.width = w;
        this.height = h;
    }

    //函式(Function)
    getArea() {
        return this.width * this.height;
    }
}

要将类别实作介面就在後别後方加上implements及欲实作见面的名称，
里面的成员就跟一般宣告类别一样，
特别需样注意的是实作的介面参数必须与类别中的参数一致喔。

类别实作介面 - 三角形(Triangle)

再来我们看到**三角形(Triangle)**的类别实作介面范例，

//类别实作介面
class Triangle implements IShape {

    //属性(Property)
    width: number;
    height: number;

    //建构函式(Constructor)
    constructor(w: number, h: number) {
        this.width = w;
        this.height = h;
    }

    //函式(Function)
    getArea() {
        return ( this.width * this.height / 2 );
    }
}

其实可以看到正方形与三角形的类别实作介面其实几乎一模一样，
差别只在类别名称与函式不同而已，
那麽这两项在这就可以就共用介面IShape了，
如范例所示。

呼叫使用

呼叫方法与类别相同，如下，

let rec = new Rectangle(10, 20);
let tri = new Triangle(10, 20);

console.log(rec.getArea()); //200
console.log(tri.getArea()); //100

如此一来，就能得到需要的面积植了喔!

今日结语

介面(Interface)的重复使用希望大家都理解了，
但建立共用介面要考量的逻辑依专案的不同，
也是相当繁琐的一件事，
虽说多了一些开发成本，
相对也就少一些维护成本，
一体两面，
大家自己斟酌罗，
加油加油。