【D1n910前端學(xué)習(xí)筆記】TypeScript完全解讀（4/26） 接口
正常操作，正常分析，大家好，我是D1n910
TypeScript完全解讀（4/26）接口
0 核心內(nèi)容
基本用法
可選屬性
多余屬性檢查
繞開多余屬性檢查
只讀屬性
函數(shù)類型
索引類型
繼承接口
混合類型接口
1 基本用法
接口，可以為我們代碼數(shù)據(jù)定義結(jié)構(gòu)類型，讓其他人用我們的工具或者函數(shù)時，能夠遵循我們的規(guī)定。
1.1、引入 ts-lint
在項目命令行中，輸入命令：
`tslint --init`
生成tslint.json文件，它是用來配置tslint的一些規(guī)則。我們后面有涉及到規(guī)則部分的話，會在tslint.json的rules里進行配置。
1.2、安裝必要的插件
這個安裝后，可以在.vscode下創(chuàng)建一個settings.json文件，然后填入下面的內(nèi)容，這樣可以觸發(fā)在保存時，自動幫忙修復(fù)掉語法問題。
{
"editor.codeActionsOnSave": {
"source.fixAll.tslint": true
}
}
記得在入口文件里引入
tslint現(xiàn)在修改了很多，一些之前會有語法錯誤提示的，現(xiàn)在不一定會，比如我們這邊專門添加一個quotemark屬性，設(shè)定為true
有看到有語法提示，應(yīng)該使用雙引號替代單引號
刪除剛剛的那條規(guī)則
提示也不見了
后面有語法提示報錯，那么按照語法提示進行修改or忽略即可。
1.5、定義接口
假設(shè)我們定義了一個方法 getFullName，通過結(jié)構(gòu)賦值傳一個對象，對象內(nèi)的參數(shù)是firstName和lastName，輸出為兩個的字符串拼接
直接跑是有問題的，ts會不通過，不能完成編譯，我們需要臨時把tsconfig.json的strict給設(shè)置成false，然后查看效果
是能夠正常打印，但是，實際上這邊是希望我們能夠規(guī)范類型的，比如我們希望我們傳入的參數(shù)都是string類型的。
我們可以通過【接口】關(guān)鍵詞 interface 來進行定義接口，接口名稱可以自定義，首字母大些，在對象后冒號引入接口
這時候如果我們傳入的類型錯誤，也能夠像之前一樣報錯
我們還可以像之前一樣，給函數(shù)的返回添加類型，這里是string
我們這邊也可以不指定接口，通過我們后面說的類型別名來進行類型定義——所以一看還是接口好。
2、可選屬性
設(shè)置可選屬性的意思是，對象內(nèi)的屬性可以設(shè)置為可以有也可以沒有。
考慮下面的獲取蔬菜的方法，邏輯是，蔬菜有顏色，則輸出是什么樣顏色的什么品種，如果沒有顏色，則輸出這是什么品種
設(shè)定color為red，type為tomato，我們正常打印查看
如果我們的對象只有一個屬性type呢？
發(fā)現(xiàn)報錯了，提示類型“{ type: string; }”的參數(shù)不能賦給類型“VegetablesInfo”的參數(shù)。
我們這個color參數(shù)可以有也可以沒有，可以通過加個 ? 來設(shè)定為可選參數(shù)，這時候就不報錯了，也能看到正確返回的內(nèi)容
3、多余屬性檢查
如果我們多添加了一個參數(shù)，也會提示有問題
提示：類型“{ type: string; color: string; size: number; }”的參數(shù)不能賦給類型“VegetablesInfo”的參數(shù)。
對象文字可以只指定已知屬性，并且“size”不在類型“VegetablesInfo”中。
4、繞開多余屬性檢查
我們一般為了保證這個函數(shù)能夠正常運行，實際上加了size屬性不會影響到我們的函數(shù)正常運行，為了繞過這個多余屬性的檢查，我們可以通過這些方法
（1）指定類型
通過指定類型，告訴ts我們的類型就是VegetablesInfo，這樣就不會報錯了
（2）指定可添加屬性
通過指定傳入屬性值，類型是字符串，對應(yīng)的值是任意的，可以傳入任意的值
（3）利用類型兼容性
我們可以把傳入的參數(shù)摘出來，賦給一個變量，這邊的意思是后面的變量賦值，多了沒所謂，少了就不行。
這是三種繞過多余屬性檢測的方式。
5、只讀屬性
只需要在屬性面前添加 readonly 就可以設(shè)置為只讀屬性
我們通過這個接口定義一個對象
在進行賦值就會報錯
Cannot assign to 'type' because it is a read-only property.
只能讀這個type屬性而不能修改。
6、函數(shù)結(jié)構(gòu)
我們可以這么定義一個函數(shù)結(jié)構(gòu)的接口
其中左邊代表傳入?yún)?shù)及其類型，右邊代表返回值的類型
保存后，我們發(fā)現(xiàn)因為tslint的原因，自動修復(fù)為了下面這樣的格式，用type來定義一個函數(shù)類型更好。
我們可以這么使用
我們不可以返回和我們定義的不同類型的值
這邊我們的形參不一定相同，只要數(shù)量對上即可。
7、索引類型
重新定義一個類似數(shù)組接口，如下所示
會有警告不能將類型“string”分配給類型“number”。
而正確賦值類型的時候就OK
同樣的，我們這里也可以設(shè)置為readonly
錯誤提示：Cannot assign to '1' because it is a read-only property.
我們通常這么定義索引類型的接口
但是當我們把id值的類型換成string的時候，我們發(fā)現(xiàn)原來的myRoleDic2不報錯了，但是用數(shù)值的myRoleDic并沒有報錯。原因是在js中用數(shù)值作為屬性值時會隱式轉(zhuǎn)換成字符串
8、繼承接口
考慮下面的場景，蔬菜接口帶有color屬性，其他的子類目都有color屬性
這些重復(fù)的屬性可以抽離出來，讓子類通過繼承獲得
這么寫，myTomato會提示
Property 'color' is missing in type '{ radius: number; }' but required in type 'Tomato'
9、混合類型接口
在js中，函數(shù)是對象類型，是很靈活的，在js中對象是有屬性的，函數(shù)也可以添加屬性。
舉例子，我們在瀏覽器實現(xiàn)一個計數(shù)器，使用閉包
也可以使用命名空間的辦法
ts支持直接給函數(shù)添加屬性，即使用混合類型接口，實現(xiàn)如下
接口和類相關(guān)的內(nèi)容，可以在類那邊查看并會進行補充。
恭喜你獲得稱號
了解TypeScript的接口的勇士
你的學(xué)習(xí)進度（4/26）
▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇ ▇▇
本小節(jié)倉庫地址
https://github.com/D1N910/ts-learning/tree/master/04
聲明
本系列內(nèi)容是D1n910通過學(xué)習(xí)Lison老師的TypeScript完全解讀(26課時)整理的文字筆記，如果看完后覺得有收獲，抑或想要直接支持，抑或想要直接視頻原版內(nèi)容，請直接到https://segmentfault.com/ls/1650000018455856?r=bPXT7X。
雖然本系列是筆記，但是也有D1n910的心血所在，請勿在未告知D1n910及獲得D1n910允許的情況下直接轉(zhuǎn)載本筆記——如果您是基于筆記又生成您自己的筆記，這是一點問題都沒有的～
之前的內(nèi)容是
