TypeScript 介面

1. 介面作用

TypeScript的核心原則之一是對值所具有的結構進行型別檢查

在TypeScript裡，介面的作用就是為這些型別命名和為你的程式碼或第三方程式碼定義契約。

2. interface 實現介面

interface labelValue{
    label:string,
    // 可選屬性
    name?: string
}
// obj 代表一個物件，以label為屬性名，屬性值為字串 
function printLabel(obj:labelValue){
    console.log(obj.label)
}

// 傳參的時候可以寫name，也可以不寫
printLabel({label:'abc' })
printLabel({label:'abc', name: 'dou'})

3. 只讀屬性

只能獲取不能修改的屬性

interface labelValue{
	// 設定只讀屬性 
    readonly age: number
}

function printLabel(obj:labelValue){
    console.log(obj.age);
    obj.age = 12;  // 報錯
}

printLabel({age: 18})

4. 任意屬性

interface labelValue{
// 定義任意屬性：屬性名為string型別 屬性值為任意型別
	[propName:string]: any
}

function printLabel(obj:labelValue){
    console.log(obj.age);
    obj.age = 12; 
}

printLabel({age: 18})

5. 函式介面

interface SearchFunc {     //定義一個介面
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;   //定義mySearch型別為SearchFunc
mySearch = function(source, subString) {
    return source.search(subString) !== -1;
}
// 相當於介面的屬性是函式的引數，返回值是介面的屬性值。

mySearch('a', 'b')
mySearch(1,2)  // 報錯  引數必須數字符型別

6. 類介面

實現類介面的關鍵字是 implements;
利用類介面的設計可以規範出一個標準類最起碼所具備的屬性和方法

interface labelValue{
    label:string,
    // 可選屬性
    name?: string
}

class Child implements labelValue{
    constructor(){}
    label: string;
    name: 'dou'
}

7. 介面繼承介面

interface Parent{
    name:string,
    age: number
}

interface Child extends Parent{
    hobby: string
}

let xiaoming:Child = {
    name: 'xaioming',
    age: 14,
    hobby: 'playing'

}

也可以繼承多個介面

interface Child extends Parent, Parent1{
    hobby: string
}

8. 混合型別介面

interface Counter {
    // 函式引數為number型別，返回值為string型別
    (start: number): string;
    interval: number;
    reset(): void;
}

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

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

9. 介面繼承類

class Control{
    private state: any
}

// 建立了一個新的介面, 該介面有一個私有屬性state 和一個select函式，該函式返回空
interface selectControl extends Control{
    select(): void
}

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

// 報錯，缺少私有屬性state
class Images  implements selectControl{
    select(){}
}