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就支持了直接給函數添加屬性。混合類型接口
