TypeScript旅途2：介面

介面就像協議規範一樣。比如USB協議，而各個廠商可以有不同的實現方式，但是要遵循這個協議，實現出來的USB設備才能在其它遵循USB協議的設備上使用。在這裡不同的廠商就是介面的不同的實現者。

介面定義與可選屬性

• interface關鍵字用來定義一個介面。

• 屬性名稱裡面帶?的表示這個屬性是一個可選屬性。

• showPeople方法接收一個***People ***介面形式的變數。

• 我們定義了兩個變數people和people2，就像是廠商一樣，這兩個是介面的實現者，但是TypeScript裡面不這麼叫，我們說它們的屬性與介面是兼容的。這也是為什麼調用showPeople方法的時候可以傳入這兩個變數。介面有一個可選屬性，所以people2裡面沒有這個可選屬性phone，但是也能作為方法的參數傳遞進去。至於這兩個變數的屬性定義順序跟介面屬性定義順序沒有關係，你可以隨意調整，TypeScript的類型檢查器只會檢查是否有這個屬性和屬性的類型是否與介面定義的一致。

  只讀屬性

  只讀屬性

關鍵字readonly放到屬性名稱前，表示這個屬性在初始化以後是不可以更改的。

• 只讀數組

• 定義一個數組可以使用類型[]或者Array[類型]，同樣定義一個只讀數組可以使用關鍵字ReadonlyArray。

• 一個數組可以賦值給只讀數組，但是反過來不行。一定要把只讀數組賦值給數組的話，可以使用類型斷言。

• readonly和const

用來定義一個介面或類的屬性是只讀的時候應該用readonly，而定義一個不可變的變數的時候用const。

額外的屬性檢查

• 雖然介面的屬性都是可選屬性，但是playMusic()卻是錯誤的。

• 屬於一個字面量定義的對象，即沒有對象名稱的一個匿名對象，對於這類對象，當將這類對象賦值給變數或作為參數傳遞的時候，TypeScript會對它們進行額外屬性檢查，即將它們與目標期望的類型對比，如果它們之中包含了期望類型不包含的屬性，就會報錯（在這個例子中就是拿對象與方法playMusic期望的參數類型介面Music對比，發現介面中並沒有aa這個屬性，就會報錯）。

• 解決辦法一

[props: string]: any表示我們的介面可以有任意數量的屬性，只要屬性名不會與已經明確定義的屬性名衝突就行，至於是什麼類型我們不關心。

• 解決辦法二

通過類型斷言來解決這個問題是最簡單的方式，相當於我們做了個強制類型轉換，告訴編譯器，它就是期待的類型。

函數類型

為了使用介面表示函數類型，我們需要給介面定義一個函數簽名。它就像是一個只有參數列表和返回值類型的函數定義。參數列表裡的每個參數都需要名字和類型。

可索引的類型

可索引類型具有一個 索引簽名，它描述了對象索引的類型，還有相應的索引返回值類型。這裡定義的索引類型是number，索引返回類型是string。

索引類型還可以是string類型。

• 介面中定義了兩種索引類型，一種number，一種是string。indexArg[0]與indexArg["0"]都返回同一個屬性。

• 同時使用兩種類型的索引的時候，數字索引的返回類型必須是字元串索引返回類型的子類型。 這是因為當使用number來索引時，TypeScript會將它轉換成string然後再去索引對象。 也就是indexArg[0]會被轉換成indexArg["0"]。

• 其它的屬性的類型也要與索引返回的類型相同。

不積跬步，無以至千里；不積小流，無以成江海。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！