使用typescript改造koa开发框架的实现

强类型的 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 }}