系統學習 TypeScript（六）——認識介面

程式設計三昧發表於2022-03-05
TypeScript

前言

介面是我們在進行模組、方法等的封裝時經常會用到的一個概念，使用介面可以：

  • 將一類具體事務抽象成單一的物件方法，使用者不必關心內部的實現邏輯，只需要按照要求傳入對應的引數即可得到預期的結果輸出，從很大程度上減輕了使用者的心智負擔。
  • 一處定義，多處使用，減輕後續的維護負擔。

TypeScript 也有介面的概念，它被用來校驗資料型別是否符合要求。

image-20220305162730984

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,具體報錯資訊如下圖

image-20220305183140752

可以看到，通過使用 TypeScript 介面，既實現了型別檢查，又減少了重複指定型別檢查器的冗餘。

就像我們之前說的，TypeScript 介面就是一份約束資料型別的契約，誰都可以通過名稱去使用它來約束自己的資料型別，這就實現了複用的效果。

存在的疑惑

在上面程式碼中，不知道大家有沒有注意到一點比較怪異的地方：personalInfo_2 的資料型別並不符合 printPersonalInfo 方法中指定的資料型別，但是程式碼卻沒有報錯。

關於這一點，不知道大家都是怎麼理解的？

總結

本文主要介紹了為什麼要用 TypeScript 介面的原因以及用介面的好處。介面就像是一份契約，內容規定了資料格式，任何變數都可通過介面名稱使用介面進行型別檢查。

並且還引出了一個疑惑點，大家可以就這個問題給出自己的見解，歡迎在評論區交流！

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

相關文章