看我大 Visual Studio Code

相比于 Sublime，Visual Studio Code 是完全免費和開源的編輯器。當然，當初試用 VSCode 還是沖著 Erich Gamma 的名頭來的，用過之后根本停不下來呀：）

 

大愛 TypeScript

VSCode 本身也是用 TypeScript 寫成的。TypeScript 最大的成就就是為 Javascript 添加了類型系統。讓 Javascript 開發大型工程的能力有了顯著提高。
不要聽那些人鼓吹什么 Javascript 的動態類型，真正開發的時候有多少人用？團隊開發的時候會給隊友挖多大坑？另外，使用了 TypeScript 之后，Javascript 的動態化、動態類型特性一點點都不會丟。

相比之下，ES6 還是改造的不夠徹底，一點也不喜歡用。
再安利一下，經常看到有人抱著 《Javascript 設計模式》看，拜托，一個沒有 Class 、沒有 Interface、沒有類型系統的語言還用啥設計模式啊。即使調用一個 function，還需要看源碼才知道傳什么樣參數的語言，還封裝個毛呀。簡單暴力才是王道！

總之，面對大型工程或者需要多人合作的時候，使用 TypeScript 能顯著提升開發效率，項目周期比較長的時候，能有效降低維護成本。

 

使用 Visual Studio Code 開發微信小程序

安裝應用

安裝應用就不說了，windows 直接雙擊安裝包、iOS 直接拖到 Application 文件夾就好了。

 

安裝 typescript

安裝 typescript 之前，需要先安裝 Node.js 以便使用它的 npm 進行代碼包的管理。VSCode 重度使用 npm，以后還會多次看到它的身影。
安裝好 Node.js 之后，只要一行命令就可以安裝 typescript 了

npm install -g typescript
npm install -g typescript@next//安裝不穩定的測試版本

 

安裝好之后打開終端，輸入 tsc 看到如下界面就安裝好了

typescript 在終端的命令，是 tsc，下一步將 ts 文件編譯為 js 文件的時候，也需要這個命令才可以的。
下一步就是配置代碼提示了:)

 

配置 typings 提供代碼提示

typings 的前世今生

MS 剛剛推出 typescript 的時候，開發了一個叫做 tsd 的東東提供代碼提示的能力。但是，似乎 tsd 做的太爛了，又出了一個叫做 typings 的東東來替代它，這兩個東東的功能是完全相同的。
在最初設計 tsd 和 typings 的時候，他們跟 typescript 是完全分離的兩個項目，這兩個項目也被設計為可以為不同的編輯器提供代碼提示。同時，也可以應用到不同的語言。然而，這么長時間過去了，typings 變成了 typescript 專屬。
于是 typescript 2.0 推出之后，經開發者討論，typings 被合并到 typescript 里面，作為 typescript 的一個 submodule 來開發維護，原本的庫被 DEPRECATED 了。
按照官方的說法，是因為原來 typings 與 typescript 分離的方式，字典文件是設計成全局有效的，經常造成字典文件無法安裝和引入的問題。這個說法確實是有依據的，因為全局安裝字典文件確實是一件經常報各種錯誤的事情，我操作的時候從來就沒有成功過。

目前，大部分介紹 typings 的文章都是 typing 和 typescript 分離的時候，也就是 TypeScript 1.x 版本的時候寫的，當然，這些文章還是可以參考的，因為 typings 的使用方式還是向前兼容的，同時，在大部分情況下還是需要這種方式。

介紹 tsd 的文章就可以徹底廢棄了。

 

官方推薦的安裝字典文件的方式

typings 需要讀取 d.ts 作為提示信息的來源。d.ts 文件不僅可以為 typescript 提供提示信息，也可以為 Javascript 編寫的方法提供提示信息。
然而，就算沒有 d.ts 文件，如果按照 JSDoc 的規范為 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 文件安裝方式。
注意，以下所有操作，都要在項目目錄下進行，也就是說，打開命令行，進入到項目根目錄下，再執行這些命令。

 

1. 對 typescript 兼容性非常好的框架，例如 angular。

npm install angular

啥，這不是在安裝 angular 嗎？對的，對于這種框架，Visual Studio Code 會自動下載相應的 d.ts 文件并提供非常棒的代碼提示。

 

2. d.ts 文件單獨上傳到 npm 中的庫

npm install typed-we-app --save-dev

這樣可以單獨下載框架的 d.ts 文件，并交給 npm 管理。--save-dev 的意思是，將這個文件添加到開發依賴中。npm install 命令還有許多其他選項，在這里就不贅述了。
命令執行完后，會生成一個文件夾 node_modules 和一個 package.json 文件。node_modules 文件夾保存著 npm 管理的模塊，而 package.json 保存著這些模塊的配置信息。
當團隊開發時，拿到一個新項目，沒有 node_modules，只有 package.json ，只要在目錄下執行 npm install 就可以把所有 modules 都下載下來了。

 

3. d.ts 文件沒有上傳到 npm 管理，是通過 git 提供的，但是已經按照 typings 的要求寫好了配置文件
   這種也比較簡單，知道 git 地址之后，執行下面的命令

typings install github:Emeryao/typed-we-app -SG

這種方式就不是通過 npm 進行管理了，而是直接通過 typings 自帶的命令進行管理。運行這個命令之后，會出現以下幾個文件。
typings 文件夾和 typings.json 配置文件。
跟先前相同，拿到新項目后，運行下

typings install

就可以把所需要的文件安裝好。
從上面可以看出來，node_modules 和 typings 文件夾都可以添加到.gitignore 里面

 

4. 只有 d.ts 文件
   這種情況指的是，不知道從哪里獲取到的 d.ts 文件。例如：從度娘那里隨便搜索了一下，同事用 QQ 傳來一個 d.ts 文件。這種情況，連 d.ts 的來源都不清楚怎么辦呢？
   這時候，只需要把該文件拷貝到項目目錄里面，然后在源碼的開頭引用一下：

/// 

只要 path 引用對了，就能得到代碼提示。當然，這個提示是當前文件有效的。
如果當前項目有 typings 文件夾，并且文件夾下面有一個 index.d.ts 文件，可以把 reference 放到這里，這時候就變成全局有效了。（因為Visual Studio Code 會自動的為每個 js、ts 文件引用index.d.ts）

以上就是我用過的安裝 d.ts 文件的方式，當然了，typings 還有好多種方式提供代碼提示，本人沒有嘗試過，也就不亂寫了。需要的同學可以去 github 主頁看看。

 

可以在微信小程序里面使用 TypeScript 嗎

這個問題，當然是可以嘍。

下面我們就一步一步的，配置 Visual Studio Code ，用它開發微信小程序。

用微信開發者工具新建一個小程序項目。

這個步驟就省略了吧，官網上有文檔的。

在 VSCode 中打開項目

我這里已經有一個項目了

gfwapdf，下面就一直操作這個項目嘍。
打開 VSCode，菜單欄-文件-打開，找到項目根目錄，gfwapdf，打開就可以了。

配置 typings 提供代碼提示

0.打開終端，進入項目根目錄。
這里有兩種方式，一種是系統的終端，這個打開之后默認是用戶根目錄，需要收到 cd 到項目根目錄下（windows 的命令行打開之后應該是 C: ,同樣手動 cd 到項目根目錄下）；另一種方式是 VSCode 自帶終端，這個終端，默認路徑就是項目根目錄，直接在這里操作即可。

找不到VSCode 終端窗口的，可以選菜單-查看-集成終端。
1.啟用 typescript
在終端輸入

tsc --init

 

這個時候，已經可以新建 ts 文件開始編碼了。
編寫幾行代碼，終端輸入 tsc，就會編譯 typescript 文件并生成 js 文件。
打開 tsconfig.json，添加 “watch”：true，然后再執行 tsc 命令，就可以 watch ts 文件，只要保存一下，就會自動編譯并生成 js 文件。

注意:這里 watch 功能，需要 tsc 進程一直在終端運行?？梢园阉诺胶笈_運行，也可以開啟一個新的終端。這里，我選擇點 VSCode 終端窗口右上角的+號再開啟一個終端進行下面的操作。
木有代碼提示是不行滴，我們需要配置一下讓 VSCode 提供代碼提示。
2.安裝 d.ts 文件
這里采用上一節"3"的方式安裝。
終端里輸入

typings install github:Emeryao/typed-we-app -SG

等待一會，看到這個畫面就成功了。

可以看到，生成了 typings.json 和 typings 文件夾。
試一下提示(可能需要重啟下 VSCode)

ts 文件的提示已經搞定了。
3.解決 wxss 的提示

wxss 就是 css 的子集，只要在 VSCode 中把 wxss 的語言模式選成 css 就可以了。

點這里!
 

4.解決 wxml 的提示

推薦安裝 Visual Studio Code 插件: vscode wxml
注意，安裝這個插件后，千萬不能為 wxml 選擇語言模式！
 

5.解決自動編譯

上面已經解決了 ts 文件自動編譯成 js 文件。但是，每次開啟 vscode 之后，需要在終端里面手動輸入 tsc 命令，也是很煩的。推薦安裝這個插件
Blade Runner-Run Task When Open
安裝好這個插件之后，在 VScode 里面選擇菜單-任務-配置默認生成任務- tsc 構建

生成一個 .vscode 文件夾，里面有一個tasks.json 上面插件會在 VSCode 每次啟動的時候，自動根據 task.json 運行一些命令（當然是運行 tsc 命令嘍），這樣，編譯 ts 的工作就變成完全自動的了。
如果看不到 tsc 構建這個選項，可能需要打開一個 ts 文件后再進行上述操作。
ts 文件編譯成 js 文件后，微信開發者工具也會自動的編譯 js 文件。
至此就大功告成了。