快捷導(dǎo)航

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

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

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

初識(shí)TypeScript

TypeScript（簡(jiǎn)稱：TS）是JavaScript的超集（JS有的TS都有）。

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

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

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

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

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

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

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

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

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

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

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ǔ)法，優(yōu)先體驗(yàn)最新的語(yǔ)法，走在前端技術(shù)的前沿。

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

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

TS工具包的安裝

因?yàn)樵贜ode.js/瀏覽器當(dāng)中，它們只認(rèn)識(shí)JS代碼不認(rèn)識(shí)TS代碼，因此我們要先將TS代碼轉(zhuǎn)換為JS代碼，然后才能運(yùn)行，所以我們需要安裝typescript包用來(lái)編譯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í)在同級(jí)目錄中會(huì)出現(xiàn)一個(gè)同名的JS文件）。

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

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

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

簡(jiǎn)化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文件

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