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