首頁(yè)技術(shù)文章正文

怎樣搭建TypeScript手動(dòng)編譯環(huán)境和自動(dòng)編譯環(huán)境?

更新時(shí)間:2023-08-28 來(lái)源:黑馬程序員 瀏覽量:

IT培訓(xùn)班

TypeScript是具有類型語(yǔ)法的JavaScript,是一門強(qiáng)類型的編程語(yǔ)言。TypeScript編寫的代碼是無(wú)法直接在js引擎(瀏覽器/NodeJs)中運(yùn)行的,最終還需要經(jīng)過(guò)編譯變成js代碼才可以正常運(yùn)行。

1693194531756_編譯環(huán)境.png

既可以在開發(fā)時(shí)使用TS編寫代碼(享受強(qiáng)類型帶來(lái)的好處),同時(shí)保證實(shí)際運(yùn)行的還是JS代碼。

搭建手動(dòng)編譯環(huán)境

全局安裝typescript包(編譯引擎)->注冊(cè)tsc命令。

npm install-g typescript

新增test.ts文件,執(zhí)行tsctest.ts命令生成test.js文件執(zhí)行nodehello.js運(yùn)行js文件查看效果。

/**
命令說(shuō)明:
   1. npm create vite@latest    使用最新版本的
   2. ts-pro    項(xiàng)?名稱
   3. -- --template vanilla-ts     創(chuàng)建項(xiàng)目使用的模板為原生ts模板
*/
npm create vite@latest   ts-pro-- --template vanilla-ts

搭建工程化下的自動(dòng)編譯環(huán)境

基于工程程化的TS開發(fā)模式(webpack/ vite),TS的編譯環(huán)境已經(jīng)內(nèi)置了,無(wú)需手動(dòng)安裝配置,通過(guò)以下命令即可創(chuàng)建?個(gè)最基礎(chǔ)的自動(dòng)化的TS編譯環(huán)境。

/**
命令說(shuō)明:
   1. npm create vite@latest    使用最新版本的
   2. ts-pro    項(xiàng)?名稱
   3. -- --template vanilla-ts     創(chuàng)建項(xiàng)目使用的模板為原生ts模板
*/
npm create vite@latest   ts-pro-- --template vanilla-ts

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!