typescript的開發(fā)工具
現(xiàn)在typescript應(yīng)用越來越多了，它最大的優(yōu)勢(shì)，就是可讀性強(qiáng)。增加了很多語法檢查，減少了代碼誤錯(cuò)率。目前，我接解觸的typescript工具主要有vscode, visual stduio 2017和webstorm
vscode
它的優(yōu)點(diǎn)非常突出。首先是免費(fèi)開源。每月都會(huì)有更新，功能越來越強(qiáng)大。用它來開發(fā)typescript工程，完全夠用。像layabox和erget這兩個(gè)游戲引擎的ide,就是基于vscode定制的。而且，它本身就是基于node開發(fā)，所以算是node的自擴(kuò)展工具。它是typescript首選工具
visual studio 2017
在我心中，visual studio是宇宙無敵第一工具，能開發(fā)很多應(yīng)用，手機(jī)跨平臺(tái)應(yīng)用不在話下，還有云應(yīng)用。但是它太大了，離線英文安裝包達(dá)30G，如果全部安裝的話，我的120G的SSD小硬盤，完全不夠用。試著用它開發(fā)typescript或js，比vscode強(qiáng)大不少。但是，它太大了，跑不起…
webstorm
這是一個(gè)基于instllij的開發(fā)工具，功能也很全面，對(duì)于typescript還有專門的支持。它是收費(fèi)的，不便宜。體積也比vscode大很多。顯示效果，沒有vscode高大尚。
//比如在d:\tmp創(chuàng)建一個(gè)目錄 ts1mkdir d:\tmp\ts1cd d:\tmp\ts1npm init //按提示完成后，這完成node工程創(chuàng)建
//如果沒有安裝typescript，則用命令 npm install typescript -g 安裝tsc -v //可以看到當(dāng)前的版本//在d:\tmp\ts1目錄下面，輸入tsc --init//完成后，就會(huì)生成一個(gè)tsconfig.json的文件//最后code . //用vscode打開當(dāng)前目錄//在vscode，新建一個(gè)index.ts,//增加下面一行console.log('hello typescripit');//在命令行下，輸入tsc后，就會(huì)得到一個(gè)index.js，//然后輸入下面命令node .//就可以運(yùn)行了//或者在vscode下，按下ctrl_+ shift + b,會(huì)彈出任務(wù)菜單項(xiàng)，選擇Tsc編譯，//然后再配置vscode運(yùn)行，就可以按F5調(diào)試并運(yùn)行了。
增加代碼提示
好像從vscode 1.8后，就不使用了typing了，改使用@types了。在編寫typescript的時(shí)候，如果要用到node自帶的fs，或http等模塊，用import后會(huì)有錯(cuò)誤提示，那是因?yàn)闆]有安裝@types
//在命令提示符下：npm install @types/node@6.x //我這里用的是node 6.x//完成后，就可以愉快的使用node的模塊的代碼提示了
劃分目錄
默認(rèn)的情況下，ts和js都是在一起的，生成發(fā)布版本的時(shí)候，就會(huì)有些亂了。所以，將所有生成的代碼，放到別的目錄。
打開tsconfig.js
找到compilerOptions中的outDir，增加./build,這樣就會(huì)將代碼生成到build里面了，然后修改package.json，修改main為build/index.js就可以運(yùn)行了。
默認(rèn)的情況下，
“allowJs”: true, /* Allow javascript files to be compiled. */
表示會(huì)把代碼js文件，一起編譯到build下
這樣代碼，就會(huì)好多了：）
去除同名js
在沒有劃分目錄的情況下，基于ts生成的js和ts是在同一個(gè)目錄的，結(jié)果在vscode文件列表都會(huì)顯示，這個(gè)vscode設(shè)置一下就可以了。
Vscode->File->首選項(xiàng)->設(shè)置
增產(chǎn)加 “*/.js”: { “when”: “$(basename).ts” },就可以了，下面是具體配置的例子
"files.exclude": { "**/.git": true, "**/.svn": true, "**/.hg": true, "**/CVS": true, "**/node_modules":true, "**/typings":true, "**/logs":true, "**/*.js": { "when": "$(basename).ts" }, "**/**.js": { "when": "$(basename).tsx" }, "**/.DS_Store": true },