基础
下面介绍怎样搭建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进行开发了。