TypeScript入門-接口

▓▓▓▓▓▓ 大體介紹

　　在TypeScript裏，接口的做用就是爲這些類型命名和爲你的代碼或第三方代碼定義契約。

 

▓▓▓▓▓▓ 接口

　　例子：

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

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

　　printLabel函數有一個參數，要求這個參數是個對象，而且有一個屬性名爲label的類型爲string的屬性

　　有時咱們會傳入多個參數，可是隻檢測指定的參數有沒有

 

　　用接口來實現上面的例子：

    interface LabelledValue {
      label: string;
    }

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

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

　　注意：要用到關鍵字 interface

 

▓▓▓▓▓▓ 可選屬性

　　有時接口裏的屬性不是必須的是可選的，那麼只要加個？就能夠了

    interface SquareConfig {
      color?: string;
      width?: number;
    }

    function createSquare(config: SquareConfig): {color: string; area: number} {
      let newSquare = {color: "white", area: 100};
      if (config.color) {
        newSquare.color = config.color;
      }
      if (config.width) {
        newSquare.area = config.width * config.width;
      }
      return newSquare;
    }

    let mySquare = createSquare({color: "black"});

　　上面的代碼中 config:SquareConfig規定了函數參數，{color: string;area: numner}規定了函數返回值的類型

　　使用可選屬性的好處：

　　　　一、能夠對可能存在的屬性進行定義

　　　　二、能夠捕獲訪問不存在的屬性時的錯誤

 

▓▓▓▓▓▓ 只讀屬性

　　若是向讓一個值只讀，不能夠修改就可使用readonly

    interface Point {
        readonly x: number;
        readonly y: number;
    }

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

　　

　　TypeScript具備ReadonlyArray<number>類型，它與Array<T>類似，只是把怕有可變方法去掉了，所以能夠確保數組建立後不再能被修改：

    let a: number[] = [1, 2, 3, 4];
    let ro: ReadonlyArray<number> = a;
    ro[0] = 12; // error!
    ro.push(5); // error!
    ro.length = 100; // error!
    a = ro; // error!

 

▓▓▓▓▓▓ 額外的屬性檢查

　　看一個例子：

    interface SquareConfig {
        color?: string;
        width?: number;
    }

    function createSquare(config: SquareConfig): { color: string; area: number } {
        // ...
    }

    let mySquare = createSquare({ colour: "red", width: 100 });

　　起初會認爲這個是對的，接口定義了兩個可選屬性color和width。函數實際傳入了width屬性和一個接口沒有定義的colour屬性，可是這段代碼會報錯。

　　對象字面量會被特殊對待並且會通過額外屬性檢查，當將它們賦值給變量或做爲參數傳遞的時候。 若是一個對象字面量存在任何「目標類型」不包含的屬性時，你會獲得一個錯誤。

　　

　　最好的解決辦法就是添加一個字符串索引簽名

    interface SquareConfig {
        color?: string;
        width?: number;
        [propName: string]: any;
    }

 

▓▓▓▓▓▓ 函數類型

　　例子：

    interface SearchFunc {
      (source: string, subString: string): boolean;
    }

    let mySearch: SearchFunc;
    
    mySearch = function(src, sub) {
        let result = src.search(sub);
        if (result == -1) {
            return false;
        }
        else {
            return true;
        }
    }

　　

▓▓▓▓▓▓ 可索引的類型

　　可索引類型好比a[10]或obj['a']。 可索引類型具備一個索引簽名，它描述了對象索引的類型，還有相應的索引返回值類型。

    interface StringArray {
      [index: number]: string;
    }

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

    let myStr: string = myArray[0];    

 

 

參考資料:

　　　揭祕Angular2第3章　

　　　TypeScript Handbook（中文版）