對於基於JavaScript的各種語言，我用過Coffee。但是印象中，除了遍地語法糖，寫起來比較快。也沒有覺得特別好用。

而TypeScript可謂一門語言，其主要特性有：

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

• 面向對象，並擁有一些函數式特性；

• 類型語言；

• 實現了註解、泛型等特性；

• 適配大型App構建。

這些特性，對於曾經使用過強類型語言的開發者，並且對於重構，代碼提示有大量需求的團隊，都是很有吸引力的。雖然表面上編碼量變大了，但得到的好處則是成倍的，尤其是對於大項目。

雖然CocosCreator1.5已經提供了對TypeScript的支持，但是基於初步學習

1.安裝node

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

一路確認

2.安裝vscode

https://code.visualstudio.com/

一路確認

3.安裝TypeScript

命令行模式下，全局選項，安裝TypeScript

npm install -g typescript

4.確認三者安裝成功

在命令行模式下，用三個命令確認安裝成功

node -v
npm -v
tsc -v

新建一個文件夾，用作ts工程，命令行cd到文件夾裏，然後運行

code .

就可以從vscode打開當前文件夾

5.項目配置文件

task.json

此文件是項目的編譯配置文件

在VSCode中快捷鍵 Ctrl + Shift + B用來編譯，對應的編譯配置文件為.vscode/task.json

第一次運行時沒有這個文件，選擇創建TypeScript項目那個選項，就會自動創建.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"
}

基本沒什麽要改的，有了這個task.json後每次Ctrl + Shift + B 即可調用tsc命令編譯typescript。

tsconfig.json

這個文件和輸出有關，直接在VSCode裏建立tsconfig.json即可，然後寫入如下內容

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

launcher.json

此文件是項目的引導啟動文件

Ctrl + Shift + D 點擊配置圖標，選擇nodejs


然後根據提示創建launcher.json，打開此文件，加入一些選項，使VSCode認得typescript和sourceMap

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

這樣就可以在typescript上打斷點調試了

6.編寫並調試

新建app.ts，開始寫

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

Ctrl + Shift + B 編譯後就可以 ，F5調試程序了。

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

參考：
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

本文出自 “做遊戲的老G” 博客，請務必保留此出處http://goldlion.blog.51cto.com/4127613/1932014

CocosCreator手記03——簡單配置VSCode的TypeScript環境