欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

TypeScript入門-接口

 更新時間：2017年03月30日 08:39:03   作者：老板丶魚丸粗面  
在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。本文將詳細介紹TypeScript接口的相關知識。

大致介紹

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

接口

例子：

  function printLabel(labelledObj: { label: string }) {
   console.log(labelledObj.label);
  }
  let myObj = { size: 10, label: "Size 10 Object" };
  printLabel(myObj);

printLabel函數(shù)有一個參數(shù)，要求這個參數(shù)是個對象，并且有一個屬性名為label的類型為string的屬性

有時我們會傳入多個參數(shù)，但是只檢測指定的參數(shù)有沒有

用接口來實現(xiàn)上面的例子：

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規(guī)定了函數(shù)參數(shù)， {color: string;area: numner}規(guī)定了函數(shù)返回值的類型

使用可選屬性的好處：

1、可以對可能存在的屬性進行定義

2、可以捕獲訪問不存在的屬性時的錯誤

只讀屬性

如果向讓一個值只讀，不可以修改就可以使用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>相似，只是把怕有可變方法去掉了，因此可以確保數(shù)組創(chuàng)建后再也不能被修改：

  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。函數(shù)實際傳入了width屬性和一個接口沒有定義的colour屬性，但是這段代碼會報錯。

對象字面量會被特殊對待而且會經過額外屬性檢查，當將它們賦值給變量或作為參數(shù)傳遞的時候。 如果一個對象字面量存在任何“目標類型”不包含的屬性時，你會得到一個錯誤。

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

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

函數(shù)類型

例子：

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];

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關文章

最新評論