快捷導(dǎo)航

TypeScript安裝與使用的詳細(xì)教程

更新時間：2023年01月10日 10:33:31 作者：亦世凡華、

TypeScript是JavaScript的超集,擴(kuò)展了JavaScript的語法,因此現(xiàn)有的JavaScript代碼可與TypeScript一起工作無需任何修改,TypeScript通過類型注解提供編譯時的靜態(tài)類型檢查,下面這篇文章主要給大家介紹了關(guān)于TypeScript安裝與使用的詳細(xì)教程,需要的朋友可以參考下

初識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代碼中絕大部分錯誤都是類型錯誤(Uncaught TypeError)。

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

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

對于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）程序中任何位置的代碼都有代碼提示，享受隨時隨地的安全感，增強(qiáng)了開發(fā)體驗。

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

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

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

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

TS工具包的安裝

因為在Node.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

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

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

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的運(yùn)行步驟

根據(jù)上文的編譯運(yùn)行步驟我們發(fā)現(xiàn)每次修改代碼后，都要重復(fù)執(zhí)行兩個命令才能執(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)容，說白了就是一個JS文件，如下圖所示 node test.ts 是會報錯的，因為有了TS獨(dú)有的類型支持，刪掉冒號+number 就可以執(zhí)行 node test.ts 了，這里了解一下。