2020你應(yīng)該知道的TypeScript學(xué)習(xí)路線【Typescript基礎(chǔ)介紹】
公眾號(hào)：前端微服務(wù)
GitHub：https://github.com/yongbolu
作 ?者：子奕
一、概述
隨著Vue3用TypeScript的重構(gòu)與發(fā)布，作為JavaScript類(lèi)型超集的TypeScript，以可以編譯成JavaScript，可以在任何瀏覽器、任何計(jì)算機(jī)和任何操作系統(tǒng)上運(yùn)行，并且開(kāi)源，被再一次被推向了前端開(kāi)發(fā)語(yǔ)言的巔峰，為了順應(yīng)時(shí)代的變化，爭(zhēng)取成為與時(shí)俱進(jìn)的開(kāi)發(fā)者，小編今天從Typescript的概念、由來(lái)以及優(yōu)缺點(diǎn)方面進(jìn)行系統(tǒng)的講解，希望為學(xué)習(xí)路上的大家提供一點(diǎn)點(diǎn)幫助，如果大家覺(jué)得有幫助，記得給小編點(diǎn)個(gè)贊，如果想獲取更多干貨請(qǐng)關(guān)注前端微服務(wù)公眾號(hào)，不定期為大家?guī)?lái)干貨。
二、TypeScript是什么？
說(shuō)到TypeScript一定離不開(kāi)熟悉的JavaScript，JavaScript本身就是一門(mén)優(yōu)秀且強(qiáng)大的編程語(yǔ)言。既然JavaScript已經(jīng)這么優(yōu)秀，為什么還要使用TypeScript呢，這要從JavaScript的缺點(diǎn)入手，在早期由于JavaScript是弱類(lèi)型語(yǔ)言，在開(kāi)發(fā)過(guò)程中如果書(shū)寫(xiě)代碼不嚴(yán)謹(jǐn)，就會(huì)出現(xiàn)各種各樣的bug，導(dǎo)致代碼質(zhì)量下降，為了預(yù)防這種問(wèn)題的出現(xiàn),Facebook 出品的一個(gè)用于 JavaScript 代碼的靜態(tài)類(lèi)型檢查工具。用于找出JavaScript 代碼中的類(lèi)型錯(cuò)誤。Flow 采用 OCaml 語(yǔ)言開(kāi)發(fā)。正是由于這種問(wèn)題的存在，在很長(zhǎng)一段時(shí)間內(nèi)JavaScript被貼上了無(wú)類(lèi)型的標(biāo)簽，但由于近幾年Node的出現(xiàn)，推動(dòng)了前端工程化和自動(dòng)化以及三大框架(Angular、React、Vue)的發(fā)展，把前端推向了一個(gè)更高的起點(diǎn)，Node.js之父瑞安達(dá)爾（Ryan Dahl）發(fā)布了新的開(kāi)源項(xiàng)目 deno，而該項(xiàng)目最終是要提供一個(gè)安全的 TypeScript 運(yùn)行環(huán)境。
三、為什么要學(xué)習(xí)TypeScript？
擁有強(qiáng)大的靠山，分別為微軟與谷歌。TypeScript是由微軟開(kāi)發(fā)的，谷歌的Angular框架是用Typescript開(kāi)發(fā)的。所以TypeScript很有可能是未來(lái)的前端腳本語(yǔ)言發(fā)展的主流方向。 三大主流框架中，Vue 3.0 源碼全部用typescript重寫(xiě)。 TypeScript 是微軟在2012年開(kāi)發(fā)的一門(mén)免費(fèi)開(kāi)源的編程語(yǔ)言。它是 JavaScript 的一個(gè)超集（增強(qiáng)版）。它在JS原來(lái)的基礎(chǔ)上增加了一套十分強(qiáng)大的類(lèi)型系統(tǒng)，從而可以讓小伙伴們?cè)趯?xiě)代碼的時(shí)候獲得更加豐富的語(yǔ)法提示。在代碼的編譯階段也可以通過(guò)類(lèi)型系統(tǒng)的檢查，從而有效避免一些線上錯(cuò)誤。 TypeScript是一門(mén)比Java更Script的編程語(yǔ)言。也就是說(shuō)TypeScript具有真正的面向?qū)ο缶幊趟枷耄憧梢圆捎盟鼇?lái)完成更加大型復(fù)雜的應(yīng)用。 TypeScript始于JavaScript終于JavaScript。也就是說(shuō)TypeScript遵循JavaScript的語(yǔ)法和語(yǔ)義，任何Js都可以在Ts內(nèi)運(yùn)行，但TypeScript它不可以直接在瀏覽器中運(yùn)行，必須要將其轉(zhuǎn)換為JavaScript。
四、環(huán)境搭建
因?yàn)門(mén)ypeScript在JavaScript的基礎(chǔ)上增加了類(lèi)型系統(tǒng)，所以TypeScript不能夠直接在瀏覽器當(dāng)中運(yùn)行。我們需要使用編譯器將TypeScript編譯為JavaScript。因?yàn)門(mén)ypeScript編譯為JavaScript需要Node環(huán)境的支持，所以在編譯前請(qǐng)保證你本地已經(jīng)安裝Node運(yùn)行環(huán)境。
4.1 全局安裝TypeScript
$ npm install typescript -g
# OR
$ yarn global add typescript
查看TypeScript版本
$ tsc --version
4.2 編寫(xiě)TypeScript代碼
所有TypeScript代碼全部以.為后綴
創(chuàng)建index.ts文件
// index.ts
const name:string = "xunzhaotech.com";// string 為設(shè)置變量類(lèi)型
console.log(name);
編譯將index.ts文件
$ tsc index.ts
在文件夾內(nèi)多出一個(gè)名字為index.js的文件 接下來(lái)按照js的方式運(yùn)行
$ node index.js
五、推薦閱讀
官網(wǎng)：https://www.typescriptlang.org 中文：http://www.tslang.cn 官方博客：https://blogs.msdn.microsoft.com/typescript
六、關(guān)注我們
點(diǎn)擊下方關(guān)注我???