VSCode搭建node + typescript開發環境

咱們一塊兒來喜歡TypeScript

如今寫js不用TypeScript，倫家可能會以爲你是外星人。
是的，TypeScript很大程度加強了代碼的可讀性，可跟蹤性，可維護性和減小了bug。
那麼沒有理由不適用TypeScript進行js開發，可是迴歸本質，要根據實際出發，不是盲目的一來直接上TS。

---

我參與過一些使用TS開發的項目，也發現使用TS出現的問題。
舉點例子：

1. 無處不見的any
2. 無視TS
   高版本的express已經內置TS, 實際上處處仍是any。

app.get("/", function(req:  any, res: any) {
    res.send("Hello,"  +  data.name);
});

1. 自己一個函數能寫完的代碼，卻寫一個class來完成
2. tslint編譯一堆錯誤，依舊無視
   這條卻是其次， 由於不少時候，也許你沒有那麼多時間去處理這些問題。也說明咱們在工程化下的功夫不足。

node和typescript

node + typescript 入門級別的配置真的特別簡單。

1. npm安裝typescript
2. 配置tsconfig.json
3. 配置package.json的scripts命令

簡單三步，你就能夠經過簡單的一步npm run xxx，TS文件們就乖乖的變爲了js文件。
而後執行node dist/xx.js就能啓動你的服務了。
可是，這不是咱們所指望的。
咱們但願我修改ts文件後，自動編譯爲js文件，而後啓動服務。

---

我瞭解的相對較好的有下面三種方式：

ts-node-dev

這個方案是無心中看到的，star並非特別多，400左右。
ts-node-dev 是基於 ts-node 的。
ts-node 能夠直接執行ts文件，是否是很酷。
一句代碼就能夠監聽文件變化，並運行編譯後的代碼。
~~~
ts-node-dev --respawn app.ts
~~~

我爲何要將Typescript與Express、nodejs一塊兒使用（譯文）

TypeScript-Node-Starter

微軟這也有一個參考。也有對tslint的支持。
基本思路就是package.json 的scripts。
其主要使用的是 concurrently 和# nodemon。
其package.json的scripts以下：

"scripts": {
    "start": "npm run serve",
    "build": "npm run build-sass && npm run build-ts && npm run tslint && npm run copy-static-assets",
    "serve": "node dist/server.js",
    "watch-node": "nodemon dist/server.js",
    "watch": "concurrently -k -p \"[{name}]\" -n \"Sass,TypeScript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-sass\" \"npm run watch-ts\" \"npm run watch-node\"",
    "test": "jest --forceExit --coverage --verbose",
    "watch-test": "npm run test -- --watchAll",
    "build-ts": "tsc",
    "watch-ts": "tsc -w",
    "build-sass": "node-sass src/public/css/main.scss dist/public/css/main.css",
    "watch-sass": "node-sass -w src/public/css/main.scss dist/public/css/main.css",
    "tslint": "tslint -c tslint.json -p tsconfig.json",
    "copy-static-assets": "ts-node copyStaticAssets.ts",
    "debug": "npm run build && npm run watch-debug",
    "serve-debug": "nodemon --inspect dist/server.js",
    "watch-debug": "concurrently -k -p \"[{name}]\" -n \"Sass,TypeScript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-sass\" \"npm run watch-ts\" \"npm run serve-debug\""
  }

TypeScript with Node.js裏面提供了更加簡單的方法。 nodemon + ts-node
~~~
"scripts": {
"start": "npm run build:live",
"build": "tsc -p .",
"build:live": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
},
~~~
TypeScript-Node-Starter的package.json能夠好好看看，具備很好的擴展性。

3. gulp-typescript + gulp-nodemon

gulp-typescript負責編譯ts
gulp-nodemon負責啓動服務
主要任務就是copy, compile和watch

const gulp = require("gulp");
const ts = require("gulp-typescript");
const nodemon = require('gulp-nodemon')
const del = require('del');
const sourcemaps = require('gulp-sourcemaps');


const tsProject = ts.createProject("tsconfig.json", { noImplicitAny: true });

// 默認任務
gulp.task("default", ["copy", "compile", "watch"], function () {
    console.log('started .....')
})

// 複製配置文件
gulp.task('copy', function () {
    return gulp.src("./src/config/**/*.json")
        .pipe(gulp.dest("./dist/config"))     
})

// 編譯
gulp.task("compile", function () {
    return gulp.src("./src/**/*.ts")
        .pipe(sourcemaps.init({ loadMaps: true }))
        .pipe(tsProject())
        .js
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest("dist"));
})

gulp.task('build',['compile','copy'])


// 刪除
gulp.task('del', function (cb) {
    return del([
        'dist/**',
    ], cb);
});

// 監聽變化
gulp.task('watch', ['compile'], function (done) {
    var stream = nodemon({
        script: 'dist/app.js',
        watch: 'src/**',
        tasks: ['copy', 'compile'],
        done: done,
        ext: 'ts html json'
    })
    return stream
})

使用typescript開發node js
TypeScript with Node.js
-------------------------

ESLint

到這裏，咱們已經又進了一步。
VSCode自己有插件TSLint插件，並且有新舊版。
ESLint插件默認是 能夠讀取tslint.json的配置的，若是沒有，他有本身的默認配置。
新版的，若是有錯誤，默認是警告，而不是錯誤提示。
你去首選項勾選掉：tslint.alwaysShowRuleFailuresAsWarnings便可。

---

咱們是須要添加eslint.json配置的

1. 方便自定義
2. eslint編譯檢查，好比你的同事是用txt文件編寫的呢。

所以，咱們還須要安裝tslint包。
還須要在package.json的文件裏面添加一個腳本

"tslint": "tslint -c tslint.json -p tsconfig.json",

Prettier

代碼美化。不少編輯器都有相似功能， VSCode也不例外。
VSCode的Prettier內置了prettier-eslint和prettier-tslint插件。
你能夠在配置裏面json文件修改或者配置面板修改。

"prettier.eslintIntegration": false,

這樣一來，Prettier使用的就是tslint的配置。
在這裏之後， windows換將下，默認狀況，你就能夠Ctl + Shift + F 自動格式化代碼了。並且是按照你的tslint配置來格式化的， 就問你怕不怕。

總結

咱們最後來看一下package.json下scripts的配置

"scripts": {
"build": "npm run tslint && npm run build-ts",
"build-ts": "tsc",
"watch-ts": "tsc -w",
"watch-node": "nodemon dist/app.js",
"tslint": "tslint -c tslint.json -p tsconfig.json",
"dev": "concurrently \\"npm:watch-ts\\"  \\"npm run watch-node\\""
}

• build： 最終的構建
• build-ts: 僅僅是build TS文件
• watch-ts: 文件變化時，就build
• watch-node: build後的文件變化後，就重啓服務
• tslint: TS語法檢查
• dev: 開發模式下，修改ts文件後，自動build爲js文件，並啓動服務。

這樣一來，感受輕鬆多了。 想一想就沒好，自動美化代碼，編寫後自動啓動服務。 喝點茶，出去走走。