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