初識TypeScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5）TS類型推斷機制，不需要在代碼中的每個地方都顯示標注類型，降低了成本。

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

TS工具包的安裝

因為在Node.js/瀏覽器當中，它們只認識JS代碼不認識TS代碼，因此我們要先將TS代碼轉(zhuǎn)換為JS代碼，然后才能運行，所以我們需要安裝typescript包用來編譯TS代碼包，實現(xiàn) TS -> JS 的轉(zhuǎn)化。

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

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

npm install -g typescript

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

TS文件的編譯和運行

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

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

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

這里的報錯提示：無法重新聲明塊范圍變量“age”。是因為我們在打開TS文件的同時又打開了JS文件，關(guān)閉JS文件報錯消失。

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

簡化TS的運行步驟

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

ts-node包安裝：

npm install -g ts-node

使用方式：ts-node TS文件

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

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

1、查看本機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)文章希望大家以后多多支持腳本之家！

最新評論