轉載地址
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
