基础

下面介绍怎样搭建koa + typescript的开发环境。

初始化

首先，初始化项目：

mkdir koa-demo
cd koa-demo
npm init

然后，安装Typescript，你可以选择是安装到全局还是当前的开发环境。

全局：

npm install -g typescript

开发环境：

npm install -D typescript

具体的可以参考Typescript的官网的介绍：Typescript

koa要使用TS进行开发，需要引入types定义，这里我选择的是koa + koa-router的组合。

npm i koa koa-router --save
npm i @types/koa @types/koa-router --save-dev

tsconfig.json

先放官网的链接：tsconfig.json

这里推荐使用tsc进行初始化tsconfig.json，然后基于初始化的模版配置自己的内容。

初始化：

tsc --init

定制自己的tsconfig.json:

{
	"compileOptions": {
    "experimentalDecorators": true,
    "target": "ES5", 
    "module": "commonjs",
    "allowJs": true, 
    "declaration": true,
    "outDir": "dist",
    "strict": true, 
    "moduleResolution": "node", 
    "esModuleInterop": true, 
    "inlineSourceMap": true, 
    "forceConsistentCasingInFileNames": true
	},
	"compileOnSave": true,
  "include": ["src/**/*"],
  "exclude": ["node_module/**/*", "**/*.test.ts"]
}

配置的具体含义自行到官网查阅，这里重点说两个：experimentalDecorators和inlineSourceMap。 inlineSourceMap是debug时用到的重要的配置，这个配置可以保证使你在debug的时候不用关心编译后的文件，只在ts文件中打断点即可。

experimentalDecorators主要是忽略注解，但是这个在tsconfig中开启还不够，vscode中还有一个配置项，也需要开启，操作方法： 在vscode的设置中搜索experimentalDecorators，将设置为true即可。

运行项目：

tsc && node dist/index.js

到这里，基本的环境就准备好了，后续的开发的过程中，引入新的package的时候也将其对应的types安装到开发环境就可以舒服的使用ts了（但是有部分package没有支持ts）。

进阶

上面已经准备好基础的开发环境，可以开始进行开发了，但是你会发现，问题一大堆：怎样启动我的程序？怎样调试？怎样修改代码后自动更新？下面一一到来。 想要很好的在开发环境使用ts，首先需要了解两个工具： nodemon ts-node

npm i nodemon ts-node --save-dev

想要使用vs code的debug功能还需要配置下settings.json和launch.json文件。参考：vs code nodejs debugging。 launch.json的配置比较简单，使用vs code默认的launch配置就行。 然后在settings中开启debug的配置：

  "debug.node.autoAttach": "on",
  "debug.allowBreakpointsEverywhere": true

现在完成了基本的配置工作，下面来完成npm script。具体参数的含义，这里就不做过多的解释，自行使用-h查看。

"scripts": {
    "start": "tsc && node dist/index.js",
    "dev": "DEBUG=koa* NODE_ENV=local nodemon -w src/**/*.ts -e ts --exec 'node -r ts-node/register ./src/index.ts'",
    "debug": "DEBUG=koa* NODE_ENV=local nodemon -w src/**/*.ts -e ts --exec 'node -r ts-node/register --inspect ./src/index.ts'"
  },

现在就可以愉快的使用TS进行开发了。