TypeScript之路----探索接口（interface

TypeScript定義接口

熟悉編程語言的同學(xué)都知道，接口（interface）的重要性不言而喻。?很多內(nèi)容都會(huì)運(yùn)用到接口。typescrip中的接口類似于java，同時(shí)還增加了更靈活的接口類型，包括屬性、函數(shù)、可索引和類等，要想對(duì)typescript的操作進(jìn)行更深入的了解，接口是必須接觸到的。今天我就為大家分享一下，如何使用接口。

一. 為什么要使用接口

1.1. JavaScript存在的問題
我們?cè)贘avaScript中定義一個(gè)函數(shù)，用于獲取一個(gè)用戶的姓名和年齡的字符串：
const getUserInfo = function(user) {
return name: ${user.name}, age: ${user.age}
}
正確的調(diào)用方法應(yīng)該是下面的方式：

getUserInfo({name: "coderwhy", age: 18})

但是當(dāng)項(xiàng)目比較大，或者多人開發(fā)時(shí)，會(huì)出現(xiàn)錯(cuò)誤的調(diào)用方法：

// 錯(cuò)誤的調(diào)用
getUserInfo() // Uncaught TypeError: Cannot read property 'name' of undefined
console.log(getUserInfo({name: "coderwhy"})) // name: coderwhy, age: undefined
getUserInfo({name: "codewhy", height: 1.88}) // name: coderwhy, age: undefined

因?yàn)镴avaScript是弱類型的語言，所以并不會(huì)對(duì)我們傳入的代碼進(jìn)行任何的檢測(cè)，但是在之前的javaScript中確確實(shí)實(shí)會(huì)存在很多類似的安全隱患。
如何避免這樣的問題呢？
當(dāng)然是使用TypeScript來對(duì)代碼進(jìn)行重構(gòu)

1.2. TypeScript代碼重構(gòu)一

我們可以使用TypeScript來對(duì)上面的代碼進(jìn)行改進(jìn)：
const getUserInfo = (user: {name: string, age: number}): string => {
return name: ${user.name} age: ${user.age};
};
正確的調(diào)用是如下的方式：

getUserInfo({name: "coderwhy", age: 18});

如果調(diào)用者出現(xiàn)了錯(cuò)誤的調(diào)用，那么TypeScript會(huì)直接給出錯(cuò)誤的提示信息：

// 錯(cuò)誤的調(diào)用
getUserInfo(); // 錯(cuò)誤信息：An argument for 'user' was not provided.
getUserInfo({name: "coderwhy"}); // 錯(cuò)誤信息：Property 'age' is missing in type '{ name: string; }'

getUserInfo({name: "coderwhy", height: 1.88});
// 錯(cuò)誤信息：類型不匹配

這樣確實(shí)可以防止出現(xiàn)錯(cuò)誤的調(diào)用，但是我們?cè)诙x函數(shù)的時(shí)候，參數(shù)的類型和函數(shù)的類型都是非常長(zhǎng)的，代碼非常不便于閱讀。
所以，我們可以使用接口來對(duì)代碼再次進(jìn)行重構(gòu)。

1.3. TypeScript代碼重構(gòu)二

現(xiàn)在我們使用接口來對(duì)user的類型進(jìn)行重構(gòu)。
接口重構(gòu)一：參數(shù)類型使用接口定義

我們先定義一個(gè)IUser接口：

// 先定義一個(gè)接口

interface IUser {
name: string;
age: number;
}

接下來我們看一下函數(shù)如何來寫：

const getUserInfo = (user: IUser): string => {
return name: ${user.name}, age: ${user.age};
};

// 正確的調(diào)用
getUserInfo({name: "coderwhy", age: 18});

// 錯(cuò)誤的調(diào)用，其他也是一樣
getUserInfo();
接口重構(gòu)二：
函數(shù)的類型使用接口定義好（后面會(huì)詳細(xì)講解接口函數(shù)的定義）
我們先定義兩個(gè)接口：

第二個(gè)接口定義有一個(gè)警告，我們暫時(shí)忽略它，它的目的是如果一個(gè)函數(shù)接口只有一個(gè)方法，那么可以使用type來定義
type IUserInfoFunc = (user: IUser) => string;
interface IUser {
name: string;
age: number;
}

interface IUserInfoFunc {
(user: IUser): string;
}
接著我們?nèi)ザx函數(shù)和調(diào)用函數(shù)即可：
const getUserInfo: IUserInfoFunc = (user) => {
return name: ${user.name}, age: ${user.age};
};

// 正確的調(diào)用
getUserInfo({name: "coderwhy", age: 18});

// 錯(cuò)誤的調(diào)用
getUserInfo();

二. 接口的基本使用

2.1. 接口的定義方式

和其他很多的語言類似，TypeScript中定義接口也是使用interface關(guān)鍵字來定義：
interface IPerson {
name: string;
}
你會(huì)發(fā)現(xiàn)我都在接口的前面加了一個(gè)I，這是tslint要求的，否則會(huì)報(bào)一個(gè)警告
?要不要加前綴是根據(jù)公司規(guī)范和個(gè)人習(xí)慣
interface name must start with a capitalized I
當(dāng)然我們可以在tslint中關(guān)閉掉它：在rules中添加如下規(guī)則
"interface-name" : [true, "never-prefix"]

2.2. 接口中定義方法

定義接口中不僅僅可以有屬性，也可以有方法：
interface Person {
name: string;
run(): void;
eat(): void;
}
如果我們有一個(gè)對(duì)象是該接口類型，那么必須包含對(duì)應(yīng)的屬性和方法：
const p: Person = {
name: "why",
run() {
console.log("running");
},
eat() {
console.log("eating");
},
};

2.3. 可選屬性的定義

默認(rèn)情況下一個(gè)變量（對(duì)象）是對(duì)應(yīng)的接口類型，那么這個(gè)變量（對(duì)象）必須實(shí)現(xiàn)接口中所有的屬性和方法。
但是，開發(fā)中為了讓接口更加的靈活，某些屬性我們可能希望設(shè)計(jì)成可選的（想實(shí)現(xiàn)可以實(shí)現(xiàn)，不想實(shí)現(xiàn)也沒有關(guān)系），這個(gè)時(shí)候就可以使用可選屬性（后面詳細(xì)講解函數(shù)時(shí)，也會(huì)講到函數(shù)中有可選參數(shù)）：
interface Person {
name: string;
age?: number;
run(): void;
eat(): void;
study?(): void;
}
上面的代碼中，我們?cè)黾恿薬ge屬性和study方法，這兩個(gè)都是可選的：
?可選屬性如果沒有賦值，那么獲取到的值是undefined；
?對(duì)于可選方法，必須先進(jìn)行判斷，再調(diào)用，否則會(huì)報(bào)錯(cuò)；
const p: Person = {
name: "why",
run() {
console.log("running");
},
eat() {
console.log("eating");
},
};

console.log(p.age); // undefined
p.study(); // 不能調(diào)用可能是“未定義”的對(duì)象。
正確的調(diào)用方式如下：
if (p.study) {
p.study();
}

2.4. 只讀屬性的定義

默認(rèn)情況下，接口中定義的屬性可讀可寫：
console.log(p.name);
p.name = "流川楓";
如果一個(gè)屬性，我們只是希望在定義的時(shí)候就定義值，之后不可以修改，那么可以在屬性的前面加上一個(gè)關(guān)鍵字：readonly
interface Person {
readonly name: string;
age?: number;
run(): void;
eat(): void;
study?(): void;
}
當(dāng)我在name前面加上readonly時(shí)，賦值語句就會(huì)報(bào)錯(cuò)：
console.log(p.name);
p.name = "流川楓"; // Cannot assign to 'name' because it is a read-only property.

三. 接口的高級(jí)使用

3.1. 函數(shù)類型的定義

接口不僅僅可以定義普通的對(duì)象類型，也可以定義函數(shù)的類型
// 函數(shù)類型的定義
interface SumFunc {
(num1: number, num2: number): number;
}

// 定義具體的函數(shù)
const sum: SumFunc = (num1, num2) => {
return num1 + num2;
};

// 調(diào)用函數(shù)
console.log(sum(20, 30));
不過上面的接口中只有一個(gè)函數(shù)，TypeScript會(huì)給我們一個(gè)建議，可以使用type來定義一個(gè)函數(shù)的類型：
type SumFunc = (num1: number, num2: number) => number;
關(guān)于type的更多用戶，我們后面專門進(jìn)行講解，暫時(shí)不在接口中展開討論。

3.2. 可索引類型的定義

和使用接口描述函數(shù)的類型差不多，我們也可以使用接口來描述 可索引類型
?比如一個(gè)變量可以這樣訪問：a[3]，a["name"]
可索引類型具有一個(gè) 索引簽名，它描述了對(duì)象索引的類型，還有相應(yīng)的索引返回值類型。
// 定義可索引類型的接口
interface RoleMap {

}

// 賦值具體的值
// 賦值方式一：
const roleMap1: RoleMap = {
0: "學(xué)生",
1: "講師",
2: "班主任",
};

// 賦值方式二：因?yàn)閿?shù)組本身是可索引的值
const roleMap2 = ["魯班七號(hào)", "露娜", "李白"];

// 取出對(duì)應(yīng)的值
console.log(roleMap1[0]); // 學(xué)生
console.log(roleMap2[1]); // 露娜
上面的案例中，我們的索引簽名是數(shù)字類型， TypeScript支持兩種索引簽名：字符串和數(shù)字。
我們來定義一個(gè)字符串的索引類型：
interface RoleMap {

}

const roleMap: RoleMap = {
aaa: "魯班七號(hào)",
bbb: "露娜",
ccc: "李白",
};

console.log(roleMap.aaa);
console.log(roleMap["aaa"]); // 警告：不推薦這樣來取
可以同時(shí)使用兩種類型的索引，但是數(shù)字索引的返回值必須是字符串索引返回值類型的子類型：
這是因?yàn)楫?dāng)使用 number來索引時(shí)，JavaScript會(huì)將它轉(zhuǎn)換成string然后再去索引對(duì)象。

class Person {
private name: string = "";
}

class Student extends Person {
private sno: number = 0;
}

// 下面的代碼會(huì)報(bào)錯(cuò)

interface IndexSubject {

}
代碼會(huì)報(bào)如下錯(cuò)誤：

數(shù)字索引類型“Person”不能賦給字符串索引類型“Student”。
修改為如下代碼就可以了：
interface IndexSubject {

}
下面的代碼也會(huì)報(bào)錯(cuò)：
letter索引得到結(jié)果的類型，必須是Person類型或者它的子類型
interface IndexSubject {

letter: string;
}

3.3. 接口的實(shí)現(xiàn)

注意：在這個(gè)小節(jié)以及下一個(gè)小節(jié)中，我們會(huì)寫一些類，但是目前還沒有詳細(xì)學(xué)習(xí)類的語法（雖然TS的類和ES6的非常相似）。
大家可以先知道我們的類如何定義，如何去和接口配合使用的即可，一些細(xì)節(jié)我會(huì)有專門的文章來解決類的使用。
”
接口除了定義某種類型規(guī)范之后，也可以和其他編程語言一樣，讓一個(gè)類去實(shí)現(xiàn)某個(gè)接口，那么這個(gè)類就必須明確去擁有這個(gè)接口中的屬性和實(shí)現(xiàn)其方法：
下面的代碼中會(huì)有關(guān)于修飾符的警告，暫時(shí)忽略，后面詳細(xì)講解
// 定義一個(gè)實(shí)體接口

interface Entity {
title: string;
log(): void;
}

// 實(shí)現(xiàn)這樣一個(gè)接口

class Post implements Entity {
title: string;

constructor(title: string) {
this.title = title;
}

log(): void {
console.log(this.title);
}
}

思考：我定義了一個(gè)接口，但是我在繼承這個(gè)接口的類中還要寫接口的實(shí)現(xiàn)方法，那我不如直接就在這個(gè)類中寫實(shí)現(xiàn)方法豈不是更便捷，還省去了定義接口？這是一個(gè)初學(xué)者經(jīng)常會(huì)有疑惑的地方。
從思考方式上，為什么需要接口?

我們從生活出發(fā)理解接口

比如你去三亞/杭州旅游, 玩了一上午后饑餓難耐, 你放眼望去, 會(huì)注意什么? 飯店!!

你可能并不會(huì)太在意這家飯店叫什么名字, 但是你知道只要后面有飯店兩個(gè)字, 就意味著這個(gè)地方必然有飯店的實(shí)現(xiàn) – 做各種菜給你吃；

接口就好比飯店/酒店這些名詞后面添加的附屬詞, 當(dāng)我們看到這些附屬詞后就知道它們具備的功能

從代碼設(shè)計(jì)上，為什么需要接口?
在代碼設(shè)計(jì)中，接口是一種規(guī)范；
接口通常用于來定義某種規(guī)范, 類似于你必須遵守的協(xié)議, 有些語言直接就叫protocol；
站在程序角度上說接口只規(guī)定了類里必須提供的屬性和方法，從而分離了規(guī)范和實(shí)現(xiàn)，增強(qiáng)了系統(tǒng)的可拓展性和可維護(hù)性；
當(dāng)然，對(duì)于初次接觸接口的人，還是很難理解它在實(shí)際的代碼設(shè)計(jì)中的好處，這點(diǎn)慢慢體會(huì)，不用心急。
3.3. 接口的繼承
和類相似（后面我們?cè)僭敿?xì)學(xué)習(xí)類的知識(shí)），接口也是可以繼承接口來提供復(fù)用性：
注意：繼承使用extends關(guān)鍵字
interface Barkable {
barking(): void;
}

interface Shakable {
shaking(): void;
}

interface Petable extends Barkable, Shakable {
eating(): void;
}
接口Petable繼承自Barkable和Shakable，另外我們發(fā)現(xiàn)一個(gè)接口可以同時(shí)繼承自多個(gè)接口
如果現(xiàn)在有一個(gè)類實(shí)現(xiàn)了Petable接口，那么不僅僅需要實(shí)現(xiàn)Petable的方法，也需要實(shí)現(xiàn)Petable繼承自的接口中的方法：
注意：實(shí)現(xiàn)接口使用implements關(guān)鍵字
class Dog implements Petable {
barking(): void {
console.log("汪汪叫");
}

shaking(): void {
console.log("搖尾巴");
}

eating(): void {
console.log("吃骨頭");
}
}

如果你覺得接口的內(nèi)容就僅僅局限于此，那可就大錯(cuò)特錯(cuò)了，接口也要結(jié)合其他的知識(shí)同時(shí)運(yùn)用，這其中必然少不了你反復(fù)的練習(xí)，如果你想提升你的編程能力，那就關(guān)注我，我會(huì)為你發(fā)布更多的精彩教程，幫助你突破瓶頸，提升自我。