初識TypeScript

TypeScript（簡稱：TS）是JavaScript的超集（JS有的TS都有）。

TypeScript = Type + JavaScript（在JS的基礎(chǔ)上，為JS添加了類型支持）。

TypeScript是微軟開發(fā)的開源編程語言，可以在任何運(yùn)行JavaScript的地方運(yùn)行。

TypeScript給JS添加類型支持的原因

背景：JS的類型系統(tǒng)存在 ” 先天缺陷 “ ，JS代碼中絕大部分錯(cuò)誤都是類型錯(cuò)誤(Uncaught TypeError)。

問題：增加了找bug，改bug的時(shí)間，嚴(yán)重影響開發(fā)效率。

從編程語言的動(dòng)靜來區(qū)分：TypeScript屬于靜態(tài)類型（編譯期做類型檢查）的編程語言，JS屬于動(dòng)態(tài)類型（執(zhí)行期做類型檢查）的編程語言，而代碼的編譯和執(zhí)行順序是先編輯后執(zhí)行，這就導(dǎo)致以下情況：

對于JS：需要等到代碼真正去執(zhí)行的時(shí)候才能發(fā)現(xiàn)錯(cuò)誤（晚）。

對于TS：在代碼編譯的時(shí)候（代碼執(zhí)行前）就可以發(fā)現(xiàn)錯(cuò)誤（早）。

配合VScode等開發(fā)工具，TS可以提前到在編寫代碼的同時(shí)就可以發(fā)現(xiàn)代碼中的錯(cuò)誤，減少找bug和改bug的時(shí)間。

TypeScript相比JS的優(yōu)勢

1）更早(寫代碼的同時(shí))發(fā)現(xiàn)錯(cuò)誤，減少找bug改bug時(shí)間，提升開發(fā)效率。

2）程序中任何位置的代碼都有代碼提示，享受隨時(shí)隨地的安全感，增強(qiáng)了開發(fā)體驗(yàn)。

3）強(qiáng)大的類型系統(tǒng)提升了代碼的可維護(hù)性，使得重構(gòu)代碼更加容易。

4）支持最新的ES語法，優(yōu)先體驗(yàn)最新的語法，走在前端技術(shù)的前沿。

5）TS類型推斷機(jī)制，不需要在代碼中的每個(gè)地方都顯示標(biāo)注類型，降低了成本。

TypeScript已經(jīng)成為大中型前端項(xiàng)目的首選編程語言，例如：Vue3源碼使用TS重寫、Angular默認(rèn)支持TS、React與TS能完美配合。

TS工具包的安裝

因?yàn)樵贜ode.js/瀏覽器當(dāng)中，它們只認(rèn)識JS代碼不認(rèn)識TS代碼，因此我們要先將TS代碼轉(zhuǎn)換為JS代碼，然后才能運(yùn)行，所以我們需要安裝typescript包用來編譯TS代碼包，實(shí)現(xiàn) TS -> JS 的轉(zhuǎn)化。

注意：要想使用TS首先你得有node環(huán)境，沒有環(huán)境的先去百度一下搭建一下node環(huán)境。

win+R 輸入 cmd 在終端安裝如下命令（進(jìn)行全局安裝）：

npm install -g typescript

驗(yàn)證是否安裝成功：tsc -v（查看 typescript 的版本）：

TS文件的編譯和運(yùn)行

1）創(chuàng)建 test.ts 文件（注意：TS的文件的后綴名為.ts）。

2）將TS編譯為JS：在終端輸入命令：tsc test.ts（此時(shí)在同級目錄中會出現(xiàn)一個(gè)同名的JS文件）。

3）執(zhí)行JS代碼：在終端中輸入命令，node test.js。

這里的報(bào)錯(cuò)提示：無法重新聲明塊范圍變量“age”。是因?yàn)槲覀冊诖蜷_TS文件的同時(shí)又打開了JS文件，關(guān)閉JS文件報(bào)錯(cuò)消失。

注意：所有合法的JS代碼都是TS代碼，由TS編譯生成的JS文件，代碼中就沒有類型信息了。

簡化TS的運(yùn)行步驟

根據(jù)上文的編譯運(yùn)行步驟我們發(fā)現(xiàn)每次修改代碼后，都要重復(fù)執(zhí)行兩個(gè)命令才能執(zhí)行TS代碼，十分繁瑣。TS官方給我們提供了 ts-node 包，能夠讓我們 “直接( ts-node命令在內(nèi)部偷偷的將TS - >JS，然后在運(yùn)行JS代碼)” 在Node.js中執(zhí)行TS代碼。

ts-node包安裝：

npm install -g ts-node

使用方式：ts-node TS文件

注意：簡寫 node TS文件 ，是可以執(zhí)行的，前提是TS文件中沒有任何的TS獨(dú)有的內(nèi)容，說白了就是一個(gè)JS文件，如下圖所示 node test.ts 是會報(bào)錯(cuò)的，因?yàn)橛辛薚S獨(dú)有的類型支持，刪掉 冒號+number 就可以執(zhí)行 node test.ts 了，這里了解一下。

附：查看ts版本、安裝、卸載

1、查看本機(jī)TS版本
npm view typescript version
2、查看本地是否安裝
npm ls typescript
3、安裝
npm i -g typescript
4、卸載
npm uninstall typescript

總結(jié)

到此這篇關(guān)于TypeScript安裝與使用的文章就介紹到這了,更多相關(guān)TS安裝與使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論