TypeScript徹底解讀(26課時)_4.TypeScript徹底解讀-接口

4.TypeScript徹底解讀-接口

初始化tslint

tslint --init:初始化完成後會生成tslint.json的文件

若是咱們涉及到一些規則都會在這個rules裏面進行配置

安裝tslint的VSCode的插件。由於我以前已經安裝過了。左上角帶個小星星，是推薦安裝的

新建interface.ts文件。而後在index.ts內添加引用

視頻中報的錯誤，我本機沒有這個錯誤

提示錯誤，單引號應該是雙引號，這個就是tslint的錯誤，通常是ts的錯誤後面前綴都是ts開頭

把提示的那個錯誤提示覆制到Rules規則裏，設置爲false,這是雙引號的問題，設置爲false，不強制必須使用雙引號

第二個錯誤

一個文件的結束必須換行

還有一個錯誤就是每一行的結束 必須以分號結尾

把分號結束的規則關掉

基礎用法

視頻中遇到的錯誤：最後屬性結尾要加逗號，而且文件結束要換行

結尾方法是能夠在設置裏面：

輸入autofix找到，點擊在setting.json中編輯

視頻中設置了這個選項，由於我機器沒有報錯因此就再也不設置這個地方了。

設置好以後，這樣在保存ts文件的時候，會自動幫咱們修復一些tslint的錯誤

繼續代碼

這裏用到ES6的解構語法

咱們調用方法getFullName 想要輸出的結果是 firstName+lastName。在調用方法的時候若是咱們傳入了一個18也是沒有問題的

輸出一下傳入的18，可是這樣確定不是咱們想要的效果了

這裏咱們能夠經過接口來限制傳入的對象的結構

依然是視頻中遇到的錯誤，接口必須以大寫字母I開頭

經過設置Rules解決這個問題，設置接口的名稱就再也不前綴字母 I了

 

繼續代碼

指定參數類型爲這個接口,由於接口內規定了類型都是stirng類型的。因此後面再傳遞數字類型的18進去是不行的

因此這裏傳遞兩個字符串過去就沒有問題了

這裏還能夠定義函數的返回類型爲stirng類型

若是不僅用接口的話，能夠直接經過對象來制定參數類型。咱們使用接口能夠簡單直接一些

js中有些參數是可選的

定義一個獲取蔬菜的方法，若是color有值那麼就返回color+空格 若是color沒有值 直接返回空格。最後再拼接上type類型

const getVegetables = ({color, type}) => {
    return `A ${color ? (color + '') : ''}${type}`
}

 

定義接口，color是個可選的參數

後來安裝了新的ts插件後和視頻裏寫法就同樣了

 

裝錯了插件了！！！！！

 

deprecated表示棄用 不宜用的意思的。

應該裝的是下面這個推薦安裝的

裝完之後就遇到了以前視頻中遇到的問題了。接口必須以I開頭

提示缺乏雙引號

修正錯誤！！！！！tslint的Rules配置錯節點了

修改成正確的配置Rules就沒有問題了

繼續代碼

視頻中遇到的一個錯誤，參數必須按照首字母排序，這裏的參數color首字母是c開頭 因此要拍在tyep的前面，

加一條規則，把這一項關閉掉

這裏咱們多加了一個屬性，由於接口裏面 舊定義兩個屬性

因此這裏確定是報錯的，可是咱們多傳了size不會影響咱們程序的執行結果，由於咱們在返回的內容裏面只用到了前兩個參數

爲了讓這個接口更靈活一些，使用方法繞過這個多與屬性的檢查

第一種方式就是使用類型斷言

使用類型斷言，表示咱們傳入的就是Vegetable規定的那樣，那麼編譯器就不會報錯了。

第二種方式，利用索引簽名，索引簽名後面會講到，這裏先看一下

執行第三個參數 屬性名是string類型的，屬性的值是any 任意類型。這樣也不會報錯了。咱們在傳入值的時候，能夠是任意多的屬性，只要你保證該有的兩個屬性有值就能夠了

第三種方式，類型兼容性，在後面也會講到

例如：var b = a

a賦值給b。b只要有a該有的屬性就能夠了。固然b可能還有其餘的屬性值

這裏咱們就是把要傳入的值賦值給了vegetableInfo，執行的一樣的道理

以上就是三種繞過多餘屬性的監測方式

 

設置接口屬性值爲只讀

屬性這是爲readonly就是隻讀的屬性了。後面定義一個對象，設置了type的屬性，而後對type的屬性就行修改就會報錯

 

屬性是隻讀的不能被修改

還能夠限定數組的屬性只能讀取不能修改

定義函數的結構的形式

視頻中一保存這個文件就變成了。爲啥個人機器沒有變化。。。。-_-.這裏是自動變成了類型別名的形式，類型別名在後面會講到

我點擊了修復，選擇了第二項 也自動變成了和視頻中同樣的效果，我以爲這裏多是由於我沒有設置那個自動修復tslint的問題。有空能夠試試！！！！

 

上面規定了返回的類型，這裏再返回字符串是不行的

這麼返回就是沒有問題的了

索引類型:

屬性名規定的是數字

若是我用字符串當屬性名這裏就報錯了

屬性名規定的是字符串，若是你傳入的是數字也是能夠的，他會自動顯執行toString 再做爲你的屬性名

在瀏覽器作測試的，兩個屬性名都是123 第一個是數字，第二個是字符串，可是最終輸出的只有一個

接口的繼承：

接口的繼承和類的繼承類似，能夠提升接口的複用性

三個都有color屬性，就能夠用到接口的繼承

繼承了接口，就都有了color的屬性

 

混合類型接口

對象能夠有屬性，函數也是能夠添加屬性的

在瀏覽器中的，定義count變量爲0

定義方法countUp每次調用countUp那麼count的值就會加1

這種方式咱們須要再全局定義一個變量，有時候這個變量會被污染，因此這個方法並非一個很好的方法

這裏定義的是一個當即執行函數，這是使用閉包的形式

在ts3.1以前須要藉助命名空間來實現，在3.1以後ts就支持了直接給函數添加屬性。混合類型接口