強類型的 TypeScript 開發體驗和維護項目上相比 JavaScript 有著明顯的優勢，那么對常用的腳手架進行改造也就勢在必行了。

接下來開始對基于 koa 框架的 node 后端腳手架進行改造：

項目開發環境 和 typescript 編譯環境的搭建； 對 node、koa、koa中間件和使用到的庫 添加類型化支持； 基于 typesript 的特性改造項目。

項目開發環境搭建

基于 gulp 搭建開發編譯環境，gulp-typescript 插件用于編譯 typescript 文件， gulp-nodemon 則可以監控文件內容的變更，自動編譯和重啟node服務，提升開發效率。

npm install -D gulp gulp-nodemon gulp-typescript ts-node typescript

gulp 的配置

gulpfile.js 的設置

const { src, dest, watch, series, task } = require('gulp');const del = require('del');const ts = require('gulp-typescript');const nodemon = require('gulp-nodemon');const tsProject = ts.createProject('tsconfig.json');function clean(cb) { return del(['dist'], cb);}// 輸出 js 到 dist目錄function toJs() { return src('src/**/*.ts')  .pipe(tsProject())  .pipe(dest('dist'));}// nodemon 監控 ts 文件function runNodemon() { nodemon({  inspect: true,  script: 'src/app.ts',  watch: ['src'],  ext: 'ts',  env: { NODE_ENV: 'development' },  // tasks: ['build'], }).on('crash', () => {  console.error('Application has crashed!/n'); });}const build = series(clean, toJs);task('build', build);exports.build = build;exports.default = runNodemon;

typescript 的配置

tsconfig.json 的設置

{ "compilerOptions": {  "baseUrl": ".", // import的相對起始路徑  "outDir": "./dist", // 構建輸出目錄  "module": "commonjs",  "target": "esnext",// node 環境支持 esnext  "allowSyntheticDefaultImports": true,  "importHelpers": true,  "strict": false,  "moduleResolution": "node",  "esModuleInterop": true,  "forceConsistentCasingInFileNames": true,  "noImplicitAny": true,  "suppressImplicitAnyIndexErrors": true,  "noUnusedParameters": true,  "noUnusedLocals": true,  "noImplicitReturns": true,  "experimentalDecorators": true, // 開啟裝飾器的使用  "emitDecoratorMetadata": true,  "allowJs": true,  "sourceMap": true,  "paths": {   "@/*": [ "src/*" ]  } }, "include": [  "src/**/*" ], "exclude": [  "node_modules",  "dist" ]}

eslint 的配置

當然 eslint 也要添加對 typescript 對支持

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.json 的設置

{ "env": {  "es6": true,  "node": true }, "extends": [  "eslint:recommended",  "plugin:@typescript-eslint/eslint-recommended" ], "globals": {  "Atomics": "readonly",  "SharedArrayBuffer": "readonly" }, "parser": "@typescript-eslint/parser", "parserOptions": {  "ecmaVersion": 2018,  "sourceType": "module" }, "plugins": [  "@typescript-eslint" ], "rules": {  "indent": [ "warn", 2 ],  "no-unused-vars": 0 }}