(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）
目錄
TypeScript 常用類型
接口?
元組?
類型推論
類型斷言
字面量類型
枚舉
any 類型
typeof?
TypeScript 常用類型
接口?
當(dāng)一個(gè)對(duì)象類型被多次使用時(shí)，一般會(huì)使用接口（interface）來(lái)描述對(duì)象的類型，達(dá)到復(fù)用的目的。
解釋：
1. 使用 interface 關(guān)鍵字來(lái)聲明接口。
2. 接口名稱（比如，此處的 IPerson），可以是任意合法的變量名稱。
3. 聲明接口后，直接使用接口名稱作為變量的類型。
4. 因?yàn)槊恳恍兄挥幸粋€(gè)屬性類型，因此，屬性類型后沒(méi)有 ;（分號(hào)）。
// 接口：
interface IPerson {
name: string
age: number
sayHi(): void
}
let person: IPerson = {
name: '劉老師',
age: 18,
sayHi() {}
}如果兩個(gè)接口之間有相同的屬性或方法，可以將公共的屬性或方法抽離出來(lái)，通過(guò)繼承來(lái)實(shí)現(xiàn)復(fù)用。
比如，這兩個(gè)接口都有 x、y 兩個(gè)屬性，重復(fù)寫(xiě)兩次，可以，但很繁瑣。
更好的方式：
解釋：
1. 使用 extends（繼承）關(guān)鍵字實(shí)現(xiàn)了接口 Point3D 繼承 Point2D。
2. 繼承后，Point3D 就有了 Point2D 的所有屬性和方法（此時(shí)，Point3D 同時(shí)有 x、y、z 三個(gè)屬性）
interface Point2D {
x: number
y: number
}
// interface Point3D { x: number; y: number; z: number }
// 使用 繼承 實(shí)現(xiàn)復(fù)用：
interface Point3D extends Point2D {
z: number
}
let p3: Point3D = {
x: 1,
y: 0,
z: 0
}元組?
場(chǎng)景：在地圖中，使用經(jīng)緯度坐標(biāo)來(lái)標(biāo)記位置信息。
可以使用數(shù)組來(lái)記錄坐標(biāo)，那么，該數(shù)組中只有兩個(gè)元素，并且這兩個(gè)元素都是數(shù)值類型。
使用 number[] 的缺點(diǎn)：不嚴(yán)謹(jǐn)，因?yàn)樵擃愋偷臄?shù)組中可以出現(xiàn)任意多個(gè)數(shù)字。
更好的方式：元組（Tuple）。
元組類型是另一種類型的數(shù)組，它確切地知道包含多少個(gè)元素，以及特定索引對(duì)應(yīng)的類型。
解釋：
1. 元組類型可以確切地標(biāo)記出有多少個(gè)元素，以及每個(gè)元素的類型。
2. 該示例中，元素有兩個(gè)元素，每個(gè)元素的類型都是 number。
類型推論
在 TS 中，某些沒(méi)有明確指出類型的地方，TS 的類型推論機(jī)制會(huì)幫助提供類型。
換句話說(shuō)：由于類型推論的存在，這些地方，類型注解可以省略不寫(xiě)！
發(fā)生類型推論的 2 種常見(jiàn)場(chǎng)景：1 聲明變量并初始化時(shí) 2 決定函數(shù)返回值時(shí)。
注意：這兩種情況下，類型注解可以省略不寫(xiě)！
推薦：能省略類型注解的地方就省略（偷懶，充分利用TS類型推論的能力，提升開(kāi)發(fā)效率）。
技巧：如果不知道類型，可以通過(guò)鼠標(biāo)放在變量名稱上，利用 VSCode 的提示來(lái)查看類型。
類型斷言
有時(shí)候你會(huì)比 TS 更加明確一個(gè)值的類型，此時(shí)，可以使用 類型斷言 來(lái)指定更具體的類型。比如
注意：getElementById 方法返回值的類型是 HTMLElement，該類型只包含所有標(biāo)簽公共的屬性或方法，不包含 a 標(biāo)簽特有的 href 等屬性。因此，這個(gè) 類型太寬泛（不具體） ，無(wú)法操作 href 等 a 標(biāo)簽特有的屬性或方法。解決方式：這種情況下就需要 使用類型斷言指定更加具體的類型
?使用類型斷言：
解釋：1. 使用 as 關(guān)鍵字實(shí)現(xiàn)類型斷言。2. 關(guān)鍵字 as 后面的類型是一個(gè)更加具體的類型（HTMLAnchorElement 是 HTMLElement 的子類型）。3. 通過(guò)類型斷言，aLink 的類型變得更加具體，這樣就可以訪問(wèn) a 標(biāo)簽特有的屬性或方法了。另一種語(yǔ)法，使用 <> 語(yǔ)法，這種語(yǔ)法形式不常用知道即可：
?技巧：在瀏覽器控制臺(tái)，通過(guò) console.dir() 打印 DOM 元素，在屬性列表的最后面，即可看到該元素的類型。
字面量類型
思考以下代碼，兩個(gè)變量的類型分別是什么？
通過(guò) TS 類型推論機(jī)制，可以得到答案：????????1. 變量 str1 的類型為： string 。????????2. 變量 str2 的類型為： 'Hello TS' 。解釋：????????1. str1 是一個(gè)變量（let），它的值可以是任意字符串，所以類型為： string 。????????2. str2 是一個(gè)常量（const），它的值不能變化只能是 'Hello TS'，所以，它的類型為： 'Hello TS' 。注意：此處的 'Hello TS' ，就是一個(gè) 字面量類型 。也就是說(shuō) 某個(gè)特定的字符串也可以作為 TS 中的類型 。除字符串外，任意的 JS 字面量（比如，對(duì)象、數(shù)字等）都可以作為類型使用。
let str1 = 'Hello TS'
const str2: 'Hello TS' = 'Hello TS'
let age: 18 = 18使用模式： 字面量類型配合聯(lián)合類型一起使用 。使用場(chǎng)景：用來(lái) 表示一組明確的可選值列表 。比如，在貪吃蛇游戲中，游戲的方向的可選值只能是上、下、左、右中的任意一個(gè)
解釋：參數(shù) direction 的值只能是 up/down/left/right 中的任意一個(gè)。優(yōu)勢(shì)：相比于 string 類型，使用字面量類型更加精確、嚴(yán)謹(jǐn)。
function changeDirection(direction: 'up' | 'down' | 'left' | 'right') {}
changeDirection('left')枚舉
枚舉的功能類似于字面量類型+聯(lián)合類型組合的功能，也可以 表示一組明確的可選值 。枚舉：定義一組命名常量 。它描述一個(gè)值，該值可以是這些命名常量中的一個(gè)。
解釋：1. 使用 enum 關(guān)鍵字定義枚舉。2. 約定枚舉名稱、枚舉中的值以大寫(xiě)字母開(kāi)頭。3. 枚舉中的多個(gè)值之間通過(guò) ,（逗號(hào)）分隔。4. 定義好枚舉后，直接使用枚舉名稱作為類型注解。注意：形參 direction 的 類型為枚舉 Direction ，那么，實(shí)參的 值就應(yīng)該是枚舉 Direction 成員的任意一個(gè) 。訪問(wèn)枚舉成員 ：
解釋：類似于 JS 中的對(duì)象，直接通過(guò) 點(diǎn)（.）語(yǔ)法 訪問(wèn)枚舉的成員。?
問(wèn)題：我們把枚舉成員作為了函數(shù)的實(shí)參，它的值是什么呢？
解釋：通過(guò)將鼠標(biāo)移入 Direction.Up，可以看到枚舉成員 Up 的值為 0。注意： 枚舉成員是有值的 ，默認(rèn)為： 從 0 開(kāi)始自增的數(shù)值 。我們把，枚舉成員的值為數(shù)字的枚舉，稱為： 數(shù)字枚舉 。當(dāng)然，也可以給枚舉中的成員初始化值。
?字符串枚舉：枚舉成員的值是字符串。
注意：字符串枚舉沒(méi)有自增長(zhǎng)行為，因此， 字符串枚舉的每個(gè)成員必須有初始值 。
枚舉是 TS 為數(shù)不多的非 JavaScript 類型級(jí)擴(kuò)展（不僅僅是類型）的特性之一。因?yàn)椋浩渌愋蛢H僅被當(dāng)做類型，而 枚舉不僅用作類型，還提供值 （枚舉成員都是有值的）。也就是說(shuō)，其他的類型會(huì)在編譯為 JS 代碼時(shí)自動(dòng)移除。但是， 枚舉類型會(huì)被編譯為 JS 代碼 ！
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-713436.html
說(shuō)明：枚舉與前面講到的字面量類型+聯(lián)合類型組合的功能類似，都用來(lái)表示一組明確的可選值列表。一般情況下， 推薦使用字面量類型+聯(lián)合類型組合的方式 ，因?yàn)橄啾让杜e，這種方式更加直觀、簡(jiǎn)潔、高效。
any 類型
原則： 不推薦使用 any ！ 這會(huì)讓 TypeScript 變?yōu)?“AnyScript”（失去 TS 類型保護(hù)的優(yōu)勢(shì)）。因?yàn)楫?dāng)值的類型為 any 時(shí)，可以對(duì)該值進(jìn)行任意操作，并且不會(huì)有代碼提示。
解釋：以上操作都不會(huì)有任何類型錯(cuò)誤提示，即使可能存在錯(cuò)誤！盡可能的避免使用 any 類型，除非 臨時(shí)使用 any 來(lái)“避免”書(shū)寫(xiě)很長(zhǎng)、很復(fù)雜的類型！其他隱式具有 any 類型的情況：1 聲明變量不提供類型也不提供默認(rèn)值 2 函數(shù)參數(shù)不加類型。注意：因?yàn)椴煌扑]使用 any，所以，這兩種情況下都應(yīng)該提供類型！
typeof?
眾所周知，JS 中提供了 typeof 操作符，用來(lái)在 JS 中獲取數(shù)據(jù)的類型。
實(shí)際上， TS 也提供了 typeof 操作符 ：可以在 類型上下文 中引用變量或?qū)傩缘念愋停愋筒樵儯?使用場(chǎng)景：根據(jù)已有變量的值，獲取該值的類型，來(lái)簡(jiǎn)化類型書(shū)寫(xiě)。
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-713436.html
解釋：1. 使用 typeof 操作符來(lái)獲取變量 p 的類型，結(jié)果與第一種（對(duì)象字面量形式的類型）相同。2. typeof 出現(xiàn)在 類型注解的位置 （參數(shù)名稱的冒號(hào)后面） 所處的環(huán)境就在類型上下文 （區(qū)別于 JS 代碼）。3. 注意：typeof 只能用來(lái)查詢變量或?qū)傩缘念愋?，無(wú)法查詢其他形式的類型（比如，函數(shù)調(diào)用的類型）。
到了這里，關(guān)于前端TypeScript學(xué)習(xí)day02-TS常用類型的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
