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

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

既可以在開發(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