接口

---

接口在面向對象設計中具有極其重要的作用，TypeScript 接口的使用方式類似于 Java，同時還增加了更靈活的接口類型，包括屬性、函數、可索引和類等類型。

屬性類型接口

在 TypeScript 中，使用 interface 關鍵字來定義接口。示例代碼如下：

interface FullName {firstName: string;secondName: string; }function printLabel(name: FullName) {console.log(name.firstName + " " + name.secondName); }let myObj = {age: 10, firstName: 'Wu', secondName: 'Weisen'}; printLabel(myObj);

上例中接口 FullName 包含兩個屬性：firstName 和 secondName且都是字符串類型，這里有兩點需要注意：

• 傳給 printLabel() 方法的對象只要“形式上”滿足接口的要求即可，例如上例中對象 myObj 必須包含 firstName 和 secondName 屬性，且類型都是 string，即使有多出的屬性也不會報錯。
• 接口類型檢查不會去檢查屬性順序，但是屬性的必須存在且類型匹配。

---

TypeScript 還提供了可選屬性，可選屬性的接口定義與普通接口的定義方式差不多，我們只需在可選屬性變量名后面加一個?符號，示例代碼如下：

interface FullName {firstName: string;secondName?: string; }function printLabel(name: FullName) {console.log(name.firstName + " " + name.secondName); }let myObj = {firstName: 'Wu'}; // secondName 是可選屬性，可以不傳 printLabel(myObj);

---

函數類型接口

接口除了描述帶有屬性的普通對象外，也能描述函數類型。定義函數類型接口時，需要明確定義函數的 參數列表 和 返回值類型，且參數列表的每個參數都要有 參數名 和 類型。示例代碼如下：

interface encrypt {(val: string, salt: string): string }

上邊已經定義好了一個函數類型接口 encrypt，現在，我們來看看如何使用函數類型接口。

let md5: encrypt; md5 = function(val: string, salt: string){console.log("orgin value:" + val);let encryptValue = /** 代碼略 **/;console.log("encryptvalue:" + encryptValue);return encryptValue; } let pwd = md5('password', 'Angular');

對于函數類型的接口要注意以下兩點：

• 函數的參數名：使用時參數個數與對應位置變量的數據類型都必須保持一致，參數名可以不一樣。
• 函數的返回值：函數的返回值類型必須與接口定義的返回值保持一致。

---

可索引類型接口

可索引類型接口用來描述那些可以通過索引得到的類型，例如 userArray[1]、user、Object["name"]等。它包含一個索引簽名，即通過特定的索引來得到指定類型的返回值。示例代碼如下：

interface UserArray {[index: number]: string; }interface UserObject {[index: string]: string; }let userArray: UserArray; let userObject: UserObject;userArray = ['張三', '李四']; userObject = {'name': '張三'};console.log(userArray[0]); // 輸出：張三 console.log(userObject['name']); // 輸出：張三

索引簽名支持字符串和數字兩種數據類型。而當使用數字類型來索引時，JavaScript 最終也會將它裝換成 字符串類型 后再去索引對象，如上例中，以下寫法都是一樣的：

console.log(userArray[0]); // 輸出：張三 console.log(userArray["0"]); // 輸出：張三

---

類類型接口

類類型接口用來規范一個類的內容，示例代碼如下:

interface Animal {name: string; }class Dog implements Animal {name: string;constructor(n: string) {} }

我們可以在接口中描述一個方法，并在類里去具體實現它的功能，示例代碼如下：

interface Animal {name: string;setName(n: string): void; }class Dog implements Animal {name: string;setName(n: string) {this.name = n;}constructor(n: string) {} }

---

接口擴展

和類一樣，接口也可以實現相互擴展，即能將成員從一個接口復制到另一個里面，這樣可以更靈活地將拆分到可復用的模塊里面，示例代碼如下:

interface Animal {eat(): void; }interface Person extends Animal {talk(): void; }class Programmer {coding(): void {console.log('wow~')} }class ITGirl extends Programmer implements Person {eat(){console.log('animal eat');}talk() {console.log('person talk');}coding(): void {console.log('I like coding');} }let itGirl = new ITGirl(); // 通過組合集成類來實現接口擴展，可以更靈活復用模塊 itGirl.coding(); // I like coding itGirl.eat(); // animal eat itGirl.talk(); // person talk

總結

以上是生活随笔為你收集整理的TypeScript入门-接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。