這篇文章給大家分享的是有關(guān)TypeScript中接口怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

為高昌等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及高昌網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、成都做網(wǎng)站、高昌網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

大致介紹

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

接口

例子：

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

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

有時(shí)我們會(huì)傳入多個(gè)參數(shù)，但是只檢測(cè)指定的參數(shù)有沒(méi)有

用接口來(lái)實(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);

注意：要用到關(guān)鍵字 interface

可選屬性

有時(shí)接口里的屬性不是必須的是可選的，那么只要加個(gè)？就可以了

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ù)返回值的類(lèi)型

使用可選屬性的好處：

1、可以對(duì)可能存在的屬性進(jìn)行定義

2、可以捕獲訪問(wèn)不存在的屬性時(shí)的錯(cuò)誤

只讀屬性

如果向讓一個(gè)值只讀，不可以修改就可以使用readonly

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

TypeScript具有ReadonlyArray<number>類(lèi)型，它與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!

額外的屬性檢查

看一個(gè)例子：

interface SquareConfig {
    color?: string;
    width?: number;
  }
  function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
  }
  let mySquare = createSquare({ colour: "red", width: 100 });

起初會(huì)認(rèn)為這個(gè)是對(duì)的，接口定義了兩個(gè)可選屬性color和width。函數(shù)實(shí)際傳入了width屬性和一個(gè)接口沒(méi)有定義的colour屬性，但是這段代碼會(huì)報(bào)錯(cuò)。

對(duì)象字面量會(huì)被特殊對(duì)待而且會(huì)經(jīng)過(guò)額外屬性檢查，當(dāng)將它們賦值給變量或作為參數(shù)傳遞的時(shí)候。 如果一個(gè)對(duì)象字面量存在任何“目標(biāo)類(lèi)型”不包含的屬性時(shí)，你會(huì)得到一個(gè)錯(cuò)誤。

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

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

函數(shù)類(lèi)型

例子：

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

可索引的類(lèi)型

可索引類(lèi)型比如a[10]或obj['a']。 可索引類(lèi)型具有一個(gè)索引簽名，它描述了對(duì)象索引的類(lèi)型，還有相應(yīng)的索引返回值類(lèi)型。

interface StringArray {
   [index: number]: string;
  }
  let myArray: StringArray;
  myArray = ["Bob", "Fred"];
  let myStr: string = myArray[0];

感謝各位的閱讀！關(guān)于“TypeScript中接口怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

標(biāo)題名稱：TypeScript中接口怎么用
標(biāo)題網(wǎng)址：http://jinyejixie.com/article38/gdjdsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、自適應(yīng)網(wǎng)站、域名注冊(cè)、Google、網(wǎng)站排名、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)