轉載位址

TypeScript基礎入門 - 接口 - 繼承接口

項目實踐倉庫

https://        github.com/durban89/typescript_demo.git               
tag: 1.0.13           

為了保證後面的學習示範需要安裝下ts-node，這樣後面的每個操作都能直接運作看到輸出的結果。

npm install -D ts-node           

後面自己在練習的時候可以這樣使用

npx ts-node src/learn_basic_types.ts           

npx ts-node 腳本路徑           

接口

TypeScript的核心原則之一是對值所具有的結構進行類型檢查。 它有時被稱做“鴨式辨型法”或“結構性子類型化”。 在TypeScript裡，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。

繼承接口

和類一樣，接口也可以互相繼承。 這讓我們能夠從一個接口裡複制成員到另一個接口裡，可以更靈活地将接口分割到可重用的子產品裡。如下執行個體示範

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <Square> {};
square.color = 'red'
square.sideLength = 10;           

一個接口可以繼承多個接口，建立出多個接口的合成接口。如下執行個體示範

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

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

let square = <Square> {};
square.color = 'red'
square.sideLength = 10;
square.penWidth = 10;           

混合類型

先前我們提過，接口能夠描述JavaScript裡豐富的類型。 因為JavaScript其動态靈活的特點，有時你會希望一個對象可以同時具有上面提到的多種類型。一個例子就是，一個對象可以同時做為函數和對象使用，并帶有額外的屬性。

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

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

let counter = getCounter()
counter(10);
counter.reset();
counter.interval = 10.0           

在使用JavaScript第三方庫的時候，你可能需要像上面那樣去完整地定義類型。

接口繼承類

當接口繼承了一個類類型時，它會繼承類的成員但不包括其實作。 就好像接口聲明了所有類中存在的成員，但并沒有提供具體實作一樣。 接口同樣會繼承到類的private和protected成員。 這意味着當你建立了一個接口繼承了一個擁有私有或受保護的成員的類時，這個接口類型隻能被這個類或其子類所實作（implement）。當你有一個龐大的繼承結構時這很有用，但要指出的是你的代碼隻在子類擁有特定屬性時起作用。 這個子類除了繼承至基類外與基類沒有任何關系。 例：

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

class Button extends Control implements SelectableControl {
    select() {}
}

class TextBox extends Control {

}

class Image implements SelectableControl {
    select() {}
}           

運作後會爆出如下異常

⨯ Unable to compile TypeScript:
src/interface_8.ts(54,7): error TS2300: Duplicate identifier 'Image'.
src/interface_8.ts(54,7): error TS2420: Class 'Image' incorrectly implements interface 'SelectableControl'.
  Property 'state' is missing in type 'Image'.           

在上面的例子裡，SelectableControl包含了Control的所有成員，包括私有成員state。 因為 state是私有成員，是以隻能夠是Control的子類們才能實作SelectableControl接口。 因為隻有 Control的子類才能夠擁有一個聲明于Control的私有成員state，這對私有成員的相容性是必需的。

在Control類内部，是允許通過SelectableControl的執行個體來通路私有成員state的。 實際上， SelectableControl接口和擁有select方法的Control類是一樣的。 Button和TextBox類是SelectableControl的子類（因為它們都繼承自Control并有select方法），但Image和Location類并不是這樣的。

本執行個體結束實踐項目位址

https://github.com/durban89/typescript_demo.git
tag: 1.0.14