環(huán)境搭建
????????TypeScript編寫的程序并不能直接通過瀏覽器運(yùn)行,我們需要先通過TypeScript編譯器把TypeScript代碼編譯成JavaScript代碼
????????TypeScript的編譯器是基于Node.js的凿菩,所以我們需要先安裝Node.js安裝Node.js
https://nodejs.org
????????安裝完成以后床绪,可以通過終端或者cmd等命令行工具來調(diào)用node
查看當(dāng)前node版本
????????????????node -v
安裝TypeScript編譯器
????????通過NPM包管理工具安裝TypeScript編譯器
????????????????npm i -g typescript
????????安裝完成以后客情,我們可以通過命令tsc來調(diào)用編譯器
查看當(dāng)前tsc編譯器版本
????????????????tsc -v
編寫代碼
????????代碼編輯器 - vscode
????????vsCode和TypeScript都是微軟的產(chǎn)品,vsCode本身就是基于TypeScript進(jìn)行開發(fā)的癞己,vsCode對TypeScript有著天然友好的支持
????????https://code.visualstudio.com/
TypeScript文件
????????默認(rèn)情況下膀斋,TypeScript的文件的后綴為.ts
TypeScript代碼
編譯執(zhí)行
????????使用我們安裝的TypeScript編譯器tsc對.ts文件進(jìn)行編譯
????????默認(rèn)情況下會(huì)在當(dāng)前文件所在目錄下生成同名的js文件
一些有用的編譯選項(xiàng)
? ??????編譯命令tsc還支持許多編譯選項(xiàng),這里我先來了解幾個(gè)比較常用的
--outDir
????????指定編譯文件輸出目錄
--target
? ??????指定編譯的代碼版本目標(biāo)痹雅,默認(rèn)為ES3
--watch
????????在監(jiān)聽模式下運(yùn)行仰担,當(dāng)文件發(fā)生改變的時(shí)候自動(dòng)編譯
????????通過上面幾個(gè)例子,我們基本可以了解tsc的使用了绩社,但是大家應(yīng)該也發(fā)現(xiàn)了摔蓝,如果每次編譯都輸入這么一大堆的選項(xiàng)其實(shí)是很繁瑣的,
????????好在TypeScript編譯為我們提供了一個(gè)更加強(qiáng)大且方便的方式愉耙,編譯配置文件:tsconfig.json贮尉,我們可以把上面的編譯選項(xiàng)保存到這個(gè)
????????配置文件中
編譯配置文件
? ??????我們可以把編譯的一些選項(xiàng)保存在一個(gè)指定的json文件中,默認(rèn)情況下tsc命令運(yùn)行的時(shí)候會(huì)自動(dòng)去加載運(yùn)行命令所在的目錄下的
????????tsconfig.json文件朴沿,配置文件格式如下????配置文件:outDir猜谚、target、watch赌渣、include魏铅、project
有了單獨(dú)的配置文件,我們就可以直接運(yùn)行
????????tsc
指定加載的配置文件
????????使用--project或-p指定配置文件目錄锡垄,會(huì)默認(rèn)加載該目錄下的tsconfig.json文件
也可以指定某個(gè)具體的配置文件