個(gè)人簡(jiǎn)介
??個(gè)人主頁(yè)： 前端雜貨鋪
???♂?學(xué)習(xí)方向： 主攻前端方向，也會(huì)涉及到服務(wù)端（Node.js 等）
??個(gè)人狀態(tài)： 2023屆本科畢業(yè)生，已拿多個(gè)前端 offer（秋招）
??未來打算： 為中國(guó)的工業(yè)軟件事業(yè)效力 n 年
??推薦學(xué)習(xí)：??前端面試寶典 ??Vue2 ??Vue3 ??Vue2/3項(xiàng)目實(shí)戰(zhàn) ??Node.js??Three.js ??JS版算法
??個(gè)人推廣：每篇文章最下方都有加入方式，旨在交流學(xué)習(xí)&資源分享，快加入進(jìn)來吧
TypeScript入門
| 內(nèi)容 | 參考鏈接 |
|---|---|
| TypeScript（零） —— 簡(jiǎn)介、環(huán)境搭建、第一個(gè)實(shí)例 | 搭建開發(fā)環(huán)境 |
認(rèn)識(shí) TypeScript
TypeScript 簡(jiǎn)介
TypeScript 是微軟開發(fā)的一個(gè)開源的編程語(yǔ)言，通過在 JavaScript 的基礎(chǔ)上添加靜態(tài)類型定義構(gòu)建而成。
TypeScript 的作用
我們都知道，JavaScript 是弱類型的語(yǔ)言，對(duì)于一些類型的限制并不是很明確。比如說我們編碼一個(gè)在兩個(gè)輸入框中輸入數(shù)字求和的加法小程序，這時(shí)候直接輸入到文本框的數(shù)字會(huì)被自動(dòng)轉(zhuǎn)換為字符串形式，就會(huì)得到 1 + 1 = 11 的奇怪結(jié)果。那么這個(gè)時(shí)候 TypeScript 就可以大顯身手，實(shí)現(xiàn) 1 + 1 = 2。
a. 規(guī)范我們的代碼
b. 代碼編譯階段就能及時(shí)發(fā)現(xiàn)問題
c. 在原生JS基礎(chǔ)上加上了一層類型定義
TypeScript 工作流
TSC （把 ts 文件轉(zhuǎn)換為 js 文件）的作用相當(dāng)于 Babel（把高級(jí)語(yǔ)法和代碼轉(zhuǎn)換為瀏覽器能識(shí)別的低級(jí)語(yǔ)法和代碼）。
編譯和運(yùn)行參考 TypeScript（零） —— 簡(jiǎn)介、環(huán)境搭建、第一個(gè)實(shí)例
上圖表示：ts 文件通過 tsc 命令把 ts 文件轉(zhuǎn)成了 js 文件。
TypeScript 的類型
相比于 JavaScript 的原始類型（基本數(shù)據(jù)類型）和對(duì)象類型（引用數(shù)據(jù)類型），TypeScript 也有自己的數(shù)據(jù)類型，內(nèi)容如下：
基本類型：boolean、string、number、array、tuple、enum、null、undefined、object、void、never、any
高級(jí)類型：union 組合類型、Nullable 可空類型、Literal 預(yù)定義類型
接下來，我們對(duì)不同類型進(jìn)行逐一詳細(xì)的探索…
Number 數(shù)字類型
對(duì)數(shù)字的定義只有一個(gè)籠統(tǒng)的 Number 表示，既能表示 整數(shù)、也能表示 浮點(diǎn)數(shù)，甚至也可以表示 正負(fù)數(shù)。例如：1，3.3，-5 等等。
let num1 = 2
let num2 = 6
function add(n1: number, n2: number) {
return n1 + n2
}
console.log(add(num1, num2))
之后終端執(zhí)行 tsc main.ts 和 node main.js，可以得出結(jié)果 8。
String 字符串類型
與 JavaScript 書寫方式及使用方法均一致。
'前端雜貨鋪'
"前端雜貨鋪"
`前端雜貨鋪`
let myName: string = "前端雜貨鋪"
console.log('myName', myName)
之后終端執(zhí)行 tsc main.ts 和 node main.js，可以得出以下結(jié)果。
Boolean 布爾類型
表示真、假，常用于處理判斷邏輯。
let isTrue: boolean = true
console.log('isTure', isTrue)
之后終端執(zhí)行 tsc main.ts 和 node main.js，可以得出以下結(jié)果。
Array 數(shù)組類型
數(shù)組中可以存放任意類型的數(shù)據(jù)，JS中數(shù)組的寬容度非常大，TS也繼承了這一點(diǎn)。
以下三種寫法（list1、list2、list3）表示的完全一致，鼠標(biāo)移動(dòng)至 list 上編譯器均提示 number[]，表示數(shù)字類型。
let list1: number[] = [1, 2, 3, 4]
let list2: Array<number> = [1, 2, 3, 4]
let list3 = [1, 2, 3, 4]
下面的 list 4 為 (string | number)[]，表示字符串和數(shù)字類型。
let list4 = [1, '前端雜貨鋪']
下面的 list 5 為 any[]，表示任意類型。
let list5: any[] = [1, '前端雜貨鋪', true]
Tuple 元組類型
固定長(zhǎng)度，固定類型的 Array，聲明元組的時(shí)候一定要事先指定類型。
let person: [number, string] = [1, "前端雜貨鋪"]
此時(shí)，元組的長(zhǎng)度和類型都被固定住了，當(dāng)我們嘗試修改元素的長(zhǎng)度和類型都會(huì)報(bào)錯(cuò)。
注：元組類型有一個(gè) Bug，可以調(diào)用 push() 方法改變?cè)M的長(zhǎng)度。
Union 聯(lián)合類型
聯(lián)合類型表示一個(gè)變量同時(shí)支持兩個(gè)或者多個(gè)不同的類型。
let union : string | number
Literal 字面量類型
可以混合使用不同的類型。
let literal : 1 | "前端雜貨鋪" | true | [1, 2, 3]
示例：merge 求和（分為數(shù)字和字符串兩種方式）
function merge(n1: number | string, n2: number | string, resultType: "as-number" | "as-string") {
if (resultType === 'as-string') {
return n1.toString() + n2.toString()
}
if (typeof n1 === "string" || typeof n2 === "string") {
return n1.toString() + n2.toString()
} else {
return n1 + n2
}
}
let mergeNumber1 = merge(1, 1, "as-number")
let mergeNumber2 = merge(1, 1, "as-string")
let mergeString = merge("前端", "雜貨鋪", "as-string")
console.log(mergeNumber1)
console.log(mergeNumber2)
console.log(mergeString)
之后終端執(zhí)行 tsc main.ts 和 node main.js，可以得出以下結(jié)果。
Enum 枚舉類型
枚舉允許我們定義一組命名的常量。默認(rèn)情況下，我們獲取到對(duì)象的某個(gè)屬性打印出來的是該屬性的索引，神奇的是，我們可以 給對(duì)象里面的屬性賦值，這時(shí)候再獲取到對(duì)象的某個(gè)屬性時(shí)打印出來的就是 我們給屬性賦的值 了。
enum Color {
red,
yellow = '黃色',
blue = 'blue'
}
let color1 = Color.red
console.log(color1)
let color2 = Color.blue
console.log(color2)
let color3 = Color.yellow
console.log(color3)
之后終端執(zhí)行 tsc main.ts 和 node main.js，可以得出以下結(jié)果。
Any 任意類型
Any 這個(gè)類型可以讓我們隨意定義類型，當(dāng)我們“懶得”定義復(fù)雜類型結(jié)構(gòu)的時(shí)候，可以合理的使用它。
let randomValue: any = 123
randomValue = true
randomValue = "前端雜貨鋪"
randomValue = {}
unknown 未知類型
unknown 不保證類型，但 可以保證類型安全，當(dāng)我們出現(xiàn)錯(cuò)誤編碼時(shí)（下面的數(shù)字 123 不能調(diào)用 toUpperCase() 方法），使用 unknow 編譯器會(huì)有報(bào)錯(cuò)提示。
我們可以做出以下適配，讓編譯器不報(bào)錯(cuò)。
let randomValue: unknown = 123
randomValue = true
randomValue = "前端雜貨鋪"
randomValue = {}
if (typeof randomValue === 'function') {
randomValue()
}
if (typeof randomValue === 'string') {
randomValue.toUpperCase()
}
void、undefined、never 類型
不存在時(shí)用 void，undefined 表示必須存在但可以不賦值，永遠(yuǎn)不會(huì)執(zhí)行完時(shí)用 never。
此時(shí)使用了 void（默認(rèn)就是 void，可加可不加），不添加返回值也一切正常。
function printResult() : void {
console.log("前端雜貨鋪")
}
console.log("Hello", printResult())
之后終端執(zhí)行 tsc main.ts 和 node main.js，可以得出以下結(jié)果。
此時(shí)使用了 undefined，函數(shù)體里面必須有返回值，我們可以在函數(shù)體內(nèi)添加 return，不然會(huì)報(bào)錯(cuò)。
function printResult() : undefined {
console.log("前端雜貨鋪")
return
}
console.log("Hello", printResult())
之后終端執(zhí)行 tsc main.ts 和 node main.js，可以得出以下結(jié)果。
此時(shí)使用了 never，一般用在拋出異?；蛘?promise 中。
function throwError(message: string, errorCode: number): never {
throw {
message,
errorCode
}
}
throwError("not found", 404)
function whileLoop(): never {
while(true) {
console.log("前端雜貨鋪")
}
}
Type Assertions 類型適配
第一個(gè) endsWith() 出現(xiàn)的地方編譯器是不會(huì)自動(dòng)提示補(bǔ)全的，因?yàn)榇藭r(shí)的類型還是 any，而不是 string，我們可以使用 endsWith() 在下面代碼中第二次和第三次出現(xiàn)的地方的方式進(jìn)行類型適配，便可以實(shí)現(xiàn)自動(dòng)補(bǔ)全（在我們剛開始不明確類型，而后面明確類型后就可以使用這種類型適配的方式）
let message : any
message = "前端雜貨鋪"
message.endsWith("鋪")
(<string>message).endsWith("鋪")
(message as string).endsWith("鋪")
本章小結(jié)
存在即合理，TypeScript 的出現(xiàn)自有它的用途。TypeScript 作為 JavaScript 的超集，對(duì) JavaScript 進(jìn)行了一些列約束，使得弱類型的 JavaScript 變成強(qiáng)類型，這就會(huì)使得代碼更清晰、可讀性更高、提高了代碼的可讀性和可維護(hù)性，更適合開發(fā)大型應(yīng)用。
結(jié)合 Vue3 對(duì) TypeScript 更好的包容性，使用 Vue3 + TS 構(gòu)建大、中、小型應(yīng)用便成了一種大趨勢(shì)…
參考資料：文章來源：http://www.zghlxwxcb.cn/news/detail-501423.html
- TypeScript 百度百科
- TypeScript 入門講解 【作者：阿萊克斯劉】
文章來源地址http://www.zghlxwxcb.cn/news/detail-501423.html
到了這里，關(guān)于兩小時(shí)快速入門 TypeScript 基礎(chǔ)（一）工作流、基本類型、高級(jí)類型的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
