看我大 Visual Studio Code

相比于 Sublime，Visual Studio Code 是完全免費(fèi)和開(kāi)源的編輯器。當(dāng)然，當(dāng)初試用 VSCode 還是沖著 Erich Gamma 的名頭來(lái)的，用過(guò)之后根本停不下來(lái)呀：）

 

大愛(ài) TypeScript

VSCode 本身也是用 TypeScript 寫(xiě)成的。TypeScript 最大的成就就是為 Javascript 添加了類(lèi)型系統(tǒng)。讓 Javascript 開(kāi)發(fā)大型工程的能力有了顯著提高。
不要聽(tīng)那些人鼓吹什么 Javascript 的動(dòng)態(tài)類(lèi)型，真正開(kāi)發(fā)的時(shí)候有多少人用？團(tuán)隊(duì)開(kāi)發(fā)的時(shí)候會(huì)給隊(duì)友挖多大坑？另外，使用了 TypeScript 之后，Javascript 的動(dòng)態(tài)化、動(dòng)態(tài)類(lèi)型特性一點(diǎn)點(diǎn)都不會(huì)丟。

相比之下，ES6 還是改造的不夠徹底，一點(diǎn)也不喜歡用。
再安利一下，經(jīng)常看到有人抱著 《Javascript 設(shè)計(jì)模式》看，拜托，一個(gè)沒(méi)有 Class 、沒(méi)有 Interface、沒(méi)有類(lèi)型系統(tǒng)的語(yǔ)言還用啥設(shè)計(jì)模式啊。即使調(diào)用一個(gè) function，還需要看源碼才知道傳什么樣參數(shù)的語(yǔ)言，還封裝個(gè)毛呀。簡(jiǎn)單暴力才是王道！

總之，面對(duì)大型工程或者需要多人合作的時(shí)候，使用 TypeScript 能顯著提升開(kāi)發(fā)效率，項(xiàng)目周期比較長(zhǎng)的時(shí)候，能有效降低維護(hù)成本。

 

使用 Visual Studio Code 開(kāi)發(fā)微信小程序

安裝應(yīng)用

安裝應(yīng)用就不說(shuō)了，windows 直接雙擊安裝包、iOS 直接拖到 Application 文件夾就好了。

 

安裝 typescript

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

npm install -g typescript
npm install -g typescript@next//安裝不穩(wěn)定的測(cè)試版本

 

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

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

 

配置 typings 提供代碼提示

typings 的前世今生

MS 剛剛推出 typescript 的時(shí)候，開(kāi)發(fā)了一個(gè)叫做 tsd 的東東提供代碼提示的能力。但是，似乎 tsd 做的太爛了，又出了一個(gè)叫做 typings 的東東來(lái)替代它，這兩個(gè)東東的功能是完全相同的。
在最初設(shè)計(jì) tsd 和 typings 的時(shí)候，他們跟 typescript 是完全分離的兩個(gè)項(xiàng)目，這兩個(gè)項(xiàng)目也被設(shè)計(jì)為可以為不同的編輯器提供代碼提示。同時(shí)，也可以應(yīng)用到不同的語(yǔ)言。然而，這么長(zhǎng)時(shí)間過(guò)去了，typings 變成了 typescript 專(zhuān)屬。
于是 typescript 2.0 推出之后，經(jīng)開(kāi)發(fā)者討論，typings 被合并到 typescript 里面，作為 typescript 的一個(gè) submodule 來(lái)開(kāi)發(fā)維護(hù)，原本的庫(kù)被 DEPRECATED 了。
按照官方的說(shuō)法，是因?yàn)樵瓉?lái) typings 與 typescript 分離的方式，字典文件是設(shè)計(jì)成全局有效的，經(jīng)常造成字典文件無(wú)法安裝和引入的問(wèn)題。這個(gè)說(shuō)法確實(shí)是有依據(jù)的，因?yàn)槿职惭b字典文件確實(shí)是一件經(jīng)常報(bào)各種錯(cuò)誤的事情，我操作的時(shí)候從來(lái)就沒(méi)有成功過(guò)。

目前，大部分介紹 typings 的文章都是 typing 和 typescript 分離的時(shí)候，也就是 TypeScript 1.x 版本的時(shí)候?qū)懙模?dāng)然，這些文章還是可以參考的，因?yàn)?typings 的使用方式還是向前兼容的，同時(shí)，在大部分情況下還是需要這種方式。

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

 

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

typings 需要讀取 d.ts 作為提示信息的來(lái)源。d.ts 文件不僅可以為 typescript 提供提示信息，也可以為 Javascript 編寫(xiě)的方法提供提示信息。
然而，就算沒(méi)有 d.ts 文件，如果按照 JSDoc 的規(guī)范為 typescript 編寫(xiě)的方法寫(xiě)注釋?zhuān)瑃ypings 也可以提供代碼提示。
例如這樣:

/**
     * 驗(yàn)證 cookie 有效性
     * @param {string} domain domain
     * @param {string} path path
     * @param {cookieEntity} item 需要驗(yàn)證的 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āng)然啦，絕大部分框架都是使用 d.ts 的方式提供代碼提示的。下面就介紹幾種常用的 d.ts 文件安裝方式。
注意，以下所有操作，都要在項(xiàng)目目錄下進(jìn)行，也就是說(shuō)，打開(kāi)命令行，進(jìn)入到項(xiàng)目根目錄下，再執(zhí)行這些命令。

 

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

npm install angular

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

 

2. d.ts 文件單獨(dú)上傳到 npm 中的庫(kù)

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

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

 

3. d.ts 文件沒(méi)有上傳到 npm 管理，是通過(guò) git 提供的，但是已經(jīng)按照 typings 的要求寫(xiě)好了配置文件
   這種也比較簡(jiǎn)單，知道 git 地址之后，執(zhí)行下面的命令

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

這種方式就不是通過(guò) npm 進(jìn)行管理了，而是直接通過(guò) typings 自帶的命令進(jìn)行管理。運(yùn)行這個(gè)命令之后，會(huì)出現(xiàn)以下幾個(gè)文件。
typings 文件夾和 typings.json 配置文件。
跟先前相同，拿到新項(xiàng)目后，運(yùn)行下

typings install

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

 

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

/// 

只要 path 引用對(duì)了，就能得到代碼提示。當(dāng)然，這個(gè)提示是當(dāng)前文件有效的。
如果當(dāng)前項(xiàng)目有 typings 文件夾，并且文件夾下面有一個(gè) index.d.ts 文件，可以把 reference 放到這里，這時(shí)候就變成全局有效了。（因?yàn)閂isual Studio Code 會(huì)自動(dòng)的為每個(gè) js、ts 文件引用index.d.ts）

以上就是我用過(guò)的安裝 d.ts 文件的方式，當(dāng)然了，typings 還有好多種方式提供代碼提示，本人沒(méi)有嘗試過(guò)，也就不亂寫(xiě)了。需要的同學(xué)可以去 github 主頁(yè)看看。

 

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

這個(gè)問(wèn)題，當(dāng)然是可以嘍。

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

用微信開(kāi)發(fā)者工具新建一個(gè)小程序項(xiàng)目。

這個(gè)步驟就省略了吧，官網(wǎng)上有文檔的。

在 VSCode 中打開(kāi)項(xiàng)目

我這里已經(jīng)有一個(gè)項(xiàng)目了

gfwapdf，下面就一直操作這個(gè)項(xiàng)目嘍。
打開(kāi) VSCode，菜單欄-文件-打開(kāi)，找到項(xiàng)目根目錄，gfwapdf，打開(kāi)就可以了。

配置 typings 提供代碼提示

0.打開(kāi)終端，進(jìn)入項(xiàng)目根目錄。
這里有兩種方式，一種是系統(tǒng)的終端，這個(gè)打開(kāi)之后默認(rèn)是用戶(hù)根目錄，需要收到 cd 到項(xiàng)目根目錄下（windows 的命令行打開(kāi)之后應(yīng)該是 C: ,同樣手動(dòng) cd 到項(xiàng)目根目錄下）；另一種方式是 VSCode 自帶終端，這個(gè)終端，默認(rèn)路徑就是項(xiàng)目根目錄，直接在這里操作即可。

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

tsc --init

 

這個(gè)時(shí)候，已經(jīng)可以新建 ts 文件開(kāi)始編碼了。
編寫(xiě)幾行代碼，終端輸入 tsc，就會(huì)編譯 typescript 文件并生成 js 文件。
打開(kāi) tsconfig.json，添加 “watch”：true，然后再執(zhí)行 tsc 命令，就可以 watch ts 文件，只要保存一下，就會(huì)自動(dòng)編譯并生成 js 文件。

注意:這里 watch 功能，需要 tsc 進(jìn)程一直在終端運(yùn)行。可以把它放到后臺(tái)運(yùn)行，也可以開(kāi)啟一個(gè)新的終端。這里，我選擇點(diǎn) VSCode 終端窗口右上角的+號(hào)再開(kāi)啟一個(gè)終端進(jìn)行下面的操作。
木有代碼提示是不行滴，我們需要配置一下讓 VSCode 提供代碼提示。
2.安裝 d.ts 文件
這里采用上一節(jié)"3"的方式安裝。
終端里輸入

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

等待一會(huì)，看到這個(gè)畫(huà)面就成功了。

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

ts 文件的提示已經(jīng)搞定了。
3.解決 wxss 的提示

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

點(diǎn)這里!
 

4.解決 wxml 的提示

推薦安裝 Visual Studio Code 插件: vscode wxml
注意，安裝這個(gè)插件后，千萬(wàn)不能為 wxml 選擇語(yǔ)言模式！
 

5.解決自動(dòng)編譯

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

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