前言
接口是我們在進行模塊、方法等的封裝時經常會用到的一個概念,使用接口可以:
- 將一類具體事務抽象成單一的對象方法,使用者不必關心內部的實現邏輯,只需要按照要求傳入對應的參數即可得到預期的結果輸出,從很大程度上減輕了使用者的心智負擔。
- 一處定義,多處使用,減輕後續的維護負擔。
TypeScript 也有接口的概念,它被用來校驗數據類型是否符合要求。
TypeScript 接口就像是一份具有名稱的契約或者規則,契約的內容規定了某個數據結構裏面的數據組成和類型,只要有某處通過名稱調用了這份契約,那就意味着此處的數據必須要接受並通過契約內容的檢查,否則會報錯。
JavaScript 代碼示例
如果用 JavaScript,我們的代碼可能是這樣的:
function printInfo(info){
console.log(info.name);
}
printInfo({name: "編程三昧"});
// 編程三昧
printInfo({age: 22});
// undefined
printInfo();
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')
由於 JavaScript 沒有靜態類型檢查機制,在代碼真正運行前無法準確判斷可能會出現的問題。經常在調用一個接口前,還需要研究一下這個接口相關的源碼,這很不利於協同開發。
我們迫切需要一種能夠在方法調用時明確顯示所需參數類型及格式的機制。
不使用接口的 TypeScript 代碼示例
在學習 TypeScript 接口之前,我們的 TypeScript 代碼可能是這樣的:
let personalInfo_1: { name: string; age: number } = {
name: "編程三昧",
age: 22
};
let personalInfo_2: { name: string; age: number } = {
name: "隱逸王",
age: 22
};
雖然達到了數據類型檢查的目的,但是很明顯,類型檢查器 { name: string; age: number }
重複,造成了代碼冗餘。
爲什麼要用 TypeScript 接口?
上面兩段代碼暴露出兩個問題:
- 沒有類型檢查器的機制不利於協同開發;
- 常規的 TypeScript 類型檢查器寫法容易造成代碼冗餘。
使用 TypeScript 接口就可以解決上述問題。比如:
interface PersonalInfo {
name: string;
age: number;
}
function printPersonalInfo(info: PersonalInfo): void {
console.log(info);
}
let personalInfo_1: PersonalInfo = {
name: "編程三昧",
age: 22
};
let personalInfo_2 = {
name: "隱逸王",
age: 22,
gender: "Male"
}
let personalInfo_3 = {
age: 22
}
printPersonalInfo(personalInfo_1);
// 編程三昧
printPersonalInfo(personalInfo_2);
// 隱逸王
printPersonalInfo(personalInfo_3);
// Error,具體報錯信息如下圖
可以看到,通過使用 TypeScript 接口,既實現了類型檢查,又減少了重複指定類型檢查器的冗餘。
就像我們之前說的,TypeScript 接口就是一份約束數據類型的契約,誰都可以通過名稱去使用它來約束自己的數據類型,這就實現了複用的效果。
存在的疑惑
在上面代碼中,不知道大家有沒有注意到一點比較怪異的地方:personalInfo_2 的數據類型並不符合 printPersonalInfo 方法中指定的數據類型,但是代碼卻沒有報錯。
關於這一點,不知道大家都是怎麼理解的?
總結
本文主要介紹了爲什麼要用 TypeScript 接口的原因以及用接口的好處。接口就像是一份契約,內容規定了數據格式,任何變量都可通過接口名稱使用接口進行類型檢查。
並且還引出了一個疑惑點,大家可以就這個問題給出自己的見解,歡迎在評論區交流!
~
~ 本文完,感謝閱讀!
~
學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!