開發(fā)環(huán)境

安裝 Node.js

因?yàn)?TypeScript 是基于Node的，所以我們要先安裝Node.js

Node.js安裝教程

安裝 TypeScript 包

在命令行窗口輸入安裝命令進(jìn)行安裝

npm install typescript -g

查看版本

tsc --version

安裝 TypeScript

注意：mac電腦，要使用 sudo npm install typescript -g 指令進(jìn)行安裝

編寫 HelloWorld 程序

注：我用的是 Vscode編輯器

編輯器下載地址：

https://code.visualstudio.com/

編輯器插件參考：

http://www.itdecent.cn/p/8b4d9ca571e6

http://www.itdecent.cn/p/bd06994333a0

1、初始化項(xiàng)目：

進(jìn)入你的編程文件夾后，可以使用npm init -y來初始化項(xiàng)目，生成package.json文件。

npm init -y? ? ? ? ? ?（ -y 為默認(rèn)）

初始化項(xiàng)目

2、創(chuàng)建tsconfig.json文件，

在終端中輸入tsc --init：它是一個(gè)TypeScript項(xiàng)目的配置文件，可以通過讀取它來設(shè)置TypeScript編譯器的編譯參數(shù)。

tsc --init

創(chuàng)建tsconfig.json文件

3、安裝@types/node

使用npm install @types/node --dev-save進(jìn)行安裝。這個(gè)主要是解決模塊的聲明文件問題。并創(chuàng)建一個(gè)?node_modules 文件。

npm install @types/node --dev-save

安裝@types/node

@types/node

4、編寫 HelloWorld.ts 文件，然后進(jìn)行保存：

var a:string = " Hello World ";

console.log( a );

HelloWorld.ts?

5、在 Vscode 的 終端 菜單下，打開運(yùn)行任務(wù)，然后選擇 tsc:構(gòu)建 - tsconfig.json ,這時(shí)會(huì)生成一個(gè) HelloWorld.js文件。

運(yùn)行任務(wù)

構(gòu)建文件

HelloWorld.js

6、在終端中輸入 node HelloWorld.js 就能看到輸出結(jié)果了

js輸出

文末福利：

tsconfig.json 文件 中文注釋

基本設(shè)置?

嚴(yán)格的類型檢查選項(xiàng)

附加檢查

模塊解析選項(xiàng)

源Map選項(xiàng)

Experimental 選擇

自動(dòng)編譯 ts 文件

打開生成的 tsconfig.json 文件 修改 "outDir"。

"outDir": "你需要的路徑"。

大概在第十四行? ??

修改 "outDir"

點(diǎn)擊菜單 終端(任務(wù))-運(yùn)行任務(wù)，點(diǎn)擊 tsc:監(jiān)視-tsconfig.json

監(jiān)視

? ? ? 此時(shí)src目錄下會(huì)自動(dòng)生成 js/ .js 文件了；如果沒有 src 文件目錄，也會(huì)自動(dòng)生成。（ 如果沒有作用 重啟一下試試）

打開 .js文件，點(diǎn)擊編輯器的拆分編輯器菜單 ， 即把js和ts文件拆開。

編輯ts文件并保存后，你會(huì)看到 js代碼會(huì)自動(dòng)生成