CocosCreator手記03——簡(jiǎn)單配置VSCode的TypeScript環(huán)境

Visual Sudio Code 1.12.2

Node v6.10.3

npm 3.10.10

tsc Version 2.3.4

對(duì)于基于JavaScript的各種語(yǔ)言，我用過(guò)Coffee。但是印象中，除了遍地語(yǔ)法糖，寫(xiě)起來(lái)比較快。也沒(méi)有覺(jué)得特別好用。和輕量級(jí)偏重快速開(kāi)發(fā)的Coffee不同，TypeScript是一門(mén)新語(yǔ)言。TypeScript 是 JavaScript 的強(qiáng)類型版本，并且也是JavaScript的超集（完全兼容JS）。

其主要特性有：

• 兼容 ECMAScript 2015（ES6）規(guī)范，可選擇編譯成ES6或ES5規(guī)范的JavaScript代碼（ECMAScript 3及以上版本）；

• 面向?qū)ο?，并擁有一些函?shù)式特性；

• 類型語(yǔ)言；

• 實(shí)現(xiàn)了注解、泛型等特性；

• 適配大型App構(gòu)建。

這些特性，對(duì)于曾經(jīng)使用過(guò)強(qiáng)類型語(yǔ)言的開(kāi)發(fā)者，并且對(duì)于重構(gòu)，代碼提示有大量需求的團(tuán)隊(duì)，都是很有吸引力的。雖然表面上編碼量變大了，但得到的好處則是成倍的，尤其是對(duì)于大項(xiàng)目。而TypeScript之父Anders Hejlsberg（安德斯·海爾斯伯格），也是Delphi和C#之父，大神級(jí)人物。

雖然CocosCreator1.5已經(jīng)提供了對(duì)TypeScript的支持，但是基于初步學(xué)習(xí)的方便性，我們還是需要一個(gè)輕量級(jí)的，獨(dú)立的TS開(kāi)發(fā)環(huán)境。

1.安裝node

https://nodejs.org/en/download/

一路確認(rèn)

國(guó)內(nèi)加速地址：

https://npm.taobao.org/

2.安裝vscode

https://code.visualstudio.com/

一路確認(rèn)

3.安裝TypeScript

命令行模式下，全局選項(xiàng)，安裝TypeScript

npm install -g typescript

國(guó)內(nèi)可用這個(gè)命令行加速：

cnpm install -g typescript

請(qǐng)密切注意全局tsc和VSCode自帶的語(yǔ)言服務(wù)版本是否一致。為避免vscode和tsc的版本沖突，比如彈出下面的提示：

可以使用帶版本號(hào)的安裝命令：

npm install -g typescript@2.3.2

4.確認(rèn)三者安裝成功

在命令行模式下，用三個(gè)命令確認(rèn)安裝成功

node -v
npm -v
tsc -v

新建一個(gè)文件夾，用作ts工程，命令行cd到文件夾里，運(yùn)行

tsc -w

使TypeScript自動(dòng)監(jiān)視文件修改并自動(dòng)編譯（這一步可選，因?yàn)閂SCode對(duì)TypeScript沒(méi)有自動(dòng)編譯，所以我們?cè)趖sc中開(kāi)啟這個(gè)功能， 在VSCode用Ctrl + Shift + B來(lái)編譯也行）

然后運(yùn)行

code .

從vscode打開(kāi)當(dāng)前文件夾

5.項(xiàng)目配置文件

task.json

此文件是項(xiàng)目的編譯配置文件

在VSCode中快捷鍵 Ctrl + Shift + B用來(lái)編譯，對(duì)應(yīng)的編譯配置文件為.vscode/task.json

第一次運(yùn)行時(shí)沒(méi)有這個(gè)文件，選擇創(chuàng)建TypeScript項(xiàng)目那個(gè)選項(xiàng)，就會(huì)自動(dòng)創(chuàng)建.vscode/task.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

基本沒(méi)什么要改的，有了這個(gè)task.json后每次Ctrl + Shift + B 即可調(diào)用tsc命令編譯typescript。

tsconfig.json

這個(gè)文件和輸出有關(guān)，直接在VSCode里建立tsconfig.json即可

然后寫(xiě)入如下內(nèi)容

{
    "compilerOptions": {
        "target": "es6",
        "outDir": "build",
        "sourceMap": true
    }
}

launcher.json 

此文件是項(xiàng)目的引導(dǎo)啟動(dòng)文件 Ctrl + Shift + D 點(diǎn)擊配置圖標(biāo)

選擇nodejs。

然后根據(jù)提示創(chuàng)建launcher.json，打開(kāi)此文件，加入一些選項(xiàng)，使VSCode認(rèn)得typescript和sourceMap

"program": "${workspaceRoot}/app.ts",
"sourceMaps": true,
"outDir": "${workspaceRoot}/build"

這樣就可以在typescript上打斷點(diǎn)調(diào)試了

6.編寫(xiě)并調(diào)試

新建app.ts，開(kāi)始寫(xiě)

/**
 * person
 */
class person {
constructor() {
}
/**
     * print
     */
public print() {
    console.log('你好，TS');
    console.log('老G，666');
    console.log('弄好了，睡覺(jué)');
}
}
let p = new person();
p.print();

Ctrl + Shift + B 編譯后（或者自動(dòng)編譯），就可以F5調(diào)試程序了。

如果需要配置瀏覽器環(huán)境，可以從下面的參考文章中找到

參考：
http://www.2gua.info/post/59

https://github.com/nshen/ts-node-vscode-starter

https://dotblogs.com.tw/lapland/2016/03/09/163229

http://www.cnblogs.com/gaoshang212/p/5626445.html

https://github.com/toddlxt/Creator-TypeScript-Boilerplate