使用 Visual Studio Code 和 TypeScript 開發(fā)微信小程
看我大 Visual Studio Code
相比于 Sublime卿捎，Visual Studio Code 是完全免費和開源的編輯器。當然胰丁，當初試用 VSCode 還是沖著 Erich Gamma 的名頭來的需了，用過之后根本停不下來呀：）
大愛 TypeScript
VSCode 本身也是用 TypeScript 寫成的音瓷。TypeScript 最大的成就就是為 Javascript 添加了類型系統(tǒng)。讓 Javascript 開發(fā)大型工程的能力有了顯著提高瓣俯。
不要聽那些人鼓吹什么 Javascript 的動態(tài)類型杰标，真正開發(fā)的時候有多少人用？團隊開發(fā)的時候會給隊友挖多大坑彩匕？另外腔剂，使用了 TypeScript 之后，Javascript 的動態(tài)化驼仪、動態(tài)類型特性一點點都不會丟掸犬。
相比之下，ES6 還是改造的不夠徹底绪爸，一點也不喜歡用湾碎。
再安利一下，經(jīng)车旎酰看到有人抱著 《Javascript 設(shè)計模式》看介褥，拜托，一個沒有 Class 、沒有 Interface柔滔、沒有類型系統(tǒng)的語言還用啥設(shè)計模式啊溢陪。即使調(diào)用一個 function，還需要看源碼才知道傳什么樣參數(shù)的語言睛廊，還封裝個毛呀嬉愧。簡單暴力才是王道！
總之喉前，面對大型工程或者需要多人合作的時候没酣，使用 TypeScript 能顯著提升開發(fā)效率，項目周期比較長的時候卵迂，能有效降低維護成本裕便。
使用 Visual Studio Code 開發(fā)微信小程序
安裝應(yīng)用
安裝應(yīng)用就不說了，windows 直接雙擊安裝包见咒、iOS 直接拖到 Application 文件夾就好了偿衰。
安裝 typescript
安裝 typescript 之前，需要先安裝 Node.js 以便使用它的 npm 進行代碼包的管理改览。VSCode 重度使用 npm下翎，以后還會多次看到它的身影。
安裝好 Node.js 之后宝当，只要一行命令就可以安裝 typescript 了
npm install -g typescript
npm install -g typescript@next//安裝不穩(wěn)定的測試版本
安裝好之后打開終端视事，輸入 tsc 看到如下界面就安裝好了
typescript 在終端的命令，是 tsc庆揩，下一步將 ts 文件編譯為 js 文件的時候俐东，也需要這個命令才可以的。
下一步就是配置代碼提示了:)
配置 typings 提供代碼提示
typings 的前世今生
MS 剛剛推出 typescript 的時候订晌，開發(fā)了一個叫做 tsd 的東東提供代碼提示的能力虏辫。但是，似乎 tsd 做的太爛了锈拨，又出了一個叫做 typings 的東東來替代它砌庄，這兩個東東的功能是完全相同的。
在最初設(shè)計 tsd 和 typings 的時候奕枢，他們跟 typescript 是完全分離的兩個項目娄昆，這兩個項目也被設(shè)計為可以為不同的編輯器提供代碼提示。同時验辞，也可以應(yīng)用到不同的語言稿黄。然而，這么長時間過去了跌造，typings 變成了 typescript 專屬。
于是 typescript 2.0 推出之后，經(jīng)開發(fā)者討論壳贪，typings 被合并到 typescript 里面陵珍，作為 typescript 的一個 submodule 來開發(fā)維護，原本的庫被 DEPRECATED 了违施。
按照官方的說法互纯，是因為原來 typings 與 typescript 分離的方式，字典文件是設(shè)計成全局有效的磕蒲，經(jīng)常造成字典文件無法安裝和引入的問題留潦。這個說法確實是有依據(jù)的，因為全局安裝字典文件確實是一件經(jīng)常報各種錯誤的事情辣往，我操作的時候從來就沒有成功過兔院。
目前，大部分介紹 typings 的文章都是 typing 和 typescript 分離的時候站削，也就是 TypeScript 1.x 版本的時候?qū)懙姆宦埽斎唬@些文章還是可以參考的许起，因為 typings 的使用方式還是向前兼容的十偶，同時，在大部分情況下還是需要這種方式园细。
介紹 tsd 的文章就可以徹底廢棄了惦积。
官方推薦的安裝字典文件的方式
typings 需要讀取 d.ts 作為提示信息的來源。d.ts 文件不僅可以為 typescript 提供提示信息猛频，也可以為 Javascript 編寫的方法提供提示信息荣刑。
然而，就算沒有 d.ts 文件伦乔，如果按照 JSDoc 的規(guī)范為 typescript 編寫的方法寫注釋厉亏，typings 也可以提供代碼提示。
例如這樣:
/**
* 驗證 cookie 有效性
* @param {string} domain domain
* @param {string} path path
* @param {cookieEntity} item 需要驗證的 cookie
* @returns {boolean} true cookie 適用于 domain+path
* @memberof GZCookieStorage
*/
protected validCookie(domain:string,path:string,item:cookieEntity):boolean{
let result:boolean = false;
if(item.domain.indexOf(domain))
return false;
}
當然啦，絕大部分框架都是使用 d.ts 的方式提供代碼提示的招刹。下面就介紹幾種常用的 d.ts 文件安裝方式恬试。
注意，以下所有操作疯暑，都要在項目目錄下進行训柴，也就是說，打開命令行妇拯，進入到項目根目錄下幻馁，再執(zhí)行這些命令洗鸵。
- 對 typescript 兼容性非常好的框架，例如 angular仗嗦。
npm install angular
啥膘滨，這不是在安裝 angular 嗎？對的稀拐，對于這種框架火邓，Visual Studio Code 會自動下載相應(yīng)的 d.ts 文件并提供非常棒的代碼提示。
- d.ts 文件單獨上傳到 npm 中的庫
npm install typed-we-app --save-dev
這樣可以單獨下載框架的 d.ts 文件德撬，并交給 npm 管理铲咨。--save-dev 的意思是，將這個文件添加到開發(fā)依賴中蜓洪。npm install 命令還有許多其他選項纤勒，在這里就不贅述了。
命令執(zhí)行完后蝠咆，會生成一個文件夾 node_modules 和一個 package.json 文件踊东。node_modules 文件夾保存著 npm 管理的模塊，而 package.json 保存著這些模塊的配置信息刚操。
當團隊開發(fā)時闸翅，拿到一個新項目，沒有 node_modules菊霜，只有 package.json 坚冀，只要在目錄下執(zhí)行 npm install 就可以把所有 modules 都下載下來了。
- d.ts 文件沒有上傳到 npm 管理鉴逞，是通過 git 提供的记某，但是已經(jīng)按照 typings 的要求寫好了配置文件
這種也比較簡單，知道 git 地址之后构捡，執(zhí)行下面的命令
typings install github:Emeryao/typed-we-app -SG
這種方式就不是通過 npm 進行管理了液南，而是直接通過 typings 自帶的命令進行管理。運行這個命令之后勾徽，會出現(xiàn)以下幾個文件滑凉。
typings 文件夾和 typings.json 配置文件。
跟先前相同喘帚，拿到新項目后畅姊，運行下
typings install
就可以把所需要的文件安裝好。
從上面可以看出來吹由，node_modules 和 typings 文件夾都可以添加到.gitignore 里面
- 只有 d.ts 文件
這種情況指的是若未，不知道從哪里獲取到的 d.ts 文件。例如：從度娘那里隨便搜索了一下倾鲫，同事用 QQ 傳來一個 d.ts 文件粗合。這種情況萍嬉，連 d.ts 的來源都不清楚怎么辦呢？
這時候舌劳，只需要把該文件拷貝到項目目錄里面帚湘，然后在源碼的開頭引用一下：
/// <reference path="globals/we-app/index.d.ts" />
只要 path 引用對了玫荣，就能得到代碼提示甚淡。當然，這個提示是當前文件有效的捅厂。
如果當前項目有 typings 文件夾贯卦，并且文件夾下面有一個 index.d.ts 文件，可以把 reference 放到這里焙贷，這時候就變成全局有效了撵割。（因為Visual Studio Code 會自動的為每個 js、ts 文件引用index.d.ts）
以上就是我用過的安裝 d.ts 文件的方式辙芍，當然了啡彬，typings 還有好多種方式提供代碼提示，本人沒有嘗試過故硅，也就不亂寫了庶灿。需要的同學可以去 github 主頁看看。
可以在微信小程序里面使用 TypeScript 嗎
這個問題吃衅，當然是可以嘍往踢。
下面我們就一步一步的，配置 Visual Studio Code 徘层，用它開發(fā)微信小程序峻呕。
用微信開發(fā)者工具新建一個小程序項目。
這個步驟就省略了吧趣效，官網(wǎng)上有文檔的瘦癌。
在 VSCode 中打開項目
我這里已經(jīng)有一個項目了
gfwapdf，下面就一直操作這個項目嘍跷敬。
打開 VSCode讯私，菜單欄-文件-打開，找到項目根目錄干花，gfwapdf妄帘，打開就可以了。
配置 typings 提供代碼提示
0.打開終端池凄，進入項目根目錄抡驼。
這里有兩種方式，一種是系統(tǒng)的終端肿仑，這個打開之后默認是用戶根目錄致盟，需要收到 cd 到項目根目錄下（windows 的命令行打開之后應(yīng)該是 C: ,同樣手動 cd 到項目根目錄下）碎税；另一種方式是 VSCode 自帶終端，這個終端馏锡，默認路徑就是項目根目錄雷蹂，直接在這里操作即可。
找不到VSCode 終端窗口的杯道，可以選菜單-查看-集成終端匪煌。
1.啟用 typescript
在終端輸入
tsc --init
這個時候，已經(jīng)可以新建 ts 文件開始編碼了党巾。
編寫幾行代碼萎庭，終端輸入 tsc，就會編譯 typescript 文件并生成 js 文件齿拂。
打開 tsconfig.json驳规，添加 “watch”：true，然后再執(zhí)行 tsc 命令署海，就可以 watch ts 文件吗购，只要保存一下，就會自動編譯并生成 js 文件砸狞。
注意:這里 watch 功能捻勉，需要 tsc 進程一直在終端運行≈捍可以把它放到后臺運行贯底，也可以開啟一個新的終端。這里撒强，我選擇點 VSCode 終端窗口右上角的+號再開啟一個終端進行下面的操作禽捆。
木有代碼提示是不行滴，我們需要配置一下讓 VSCode 提供代碼提示飘哨。
2.安裝 d.ts 文件
這里采用上一節(jié)"3"的方式安裝胚想。
終端里輸入
typings install github:Emeryao/typed-we-app -SG
等待一會，看到這個畫面就成功了芽隆。
可以看到浊服，生成了 typings.json 和 typings 文件夾。
試一下提示(可能需要重啟下 VSCode)
ts 文件的提示已經(jīng)搞定了胚吁。
3.解決 wxss 的提示
wxss 就是 css 的子集牙躺，只要在 VSCode 中把 wxss 的語言模式選成 css 就可以了。
點這里!
4.解決 wxml 的提示
推薦安裝 Visual Studio Code 插件: vscode wxml
注意腕扶，安裝這個插件后孽拷，千萬不能為 wxml 選擇語言模式！
5.解決自動編譯
上面已經(jīng)解決了 ts 文件自動編譯成 js 文件半抱。但是脓恕，每次開啟 vscode 之后膜宋，需要在終端里面手動輸入 tsc 命令，也是很煩的炼幔。推薦安裝這個插件
Blade Runner-Run Task When Open
安裝好這個插件之后秋茫，在 VScode 里面選擇菜單-任務(wù)-配置默認生成任務(wù)- tsc 構(gòu)建
生成一個 .vscode 文件夾，里面有一個tasks.json 上面插件會在 VSCode 每次啟動的時候乃秀，自動根據(jù) task.json 運行一些命令（當然是運行 tsc 命令嘍）肛著，這樣，編譯 ts 的工作就變成完全自動的了环形。
如果看不到 tsc 構(gòu)建這個選項策泣，可能需要打開一個 ts 文件后再進行上述操作衙傀。
ts 文件編譯成 js 文件后抬吟，微信開發(fā)者工具也會自動的編譯 js 文件。
至此就大功告成了统抬。
本人才疏學淺火本，難免有疏漏之處，還請各位同學批評指正
第三方提供 weapp 的d.ts 文件
https://code.visualstudio.com/docs/editor/intellisense
https://github.com/typings/typings
