koa2+typescript环境搭建
koa2+typescript环境搭建
1.安装koa2脚手架
全局安装koa2脚手架
npm install -g koa-generator
2.使用脚手架创建项目
koa2 project
后面的project表示项目的名称，我这里以koa2-ts项目名为命令 koa2 koa2-ts 举例，创建完成，生成以下目录
进入项目，安装依赖
cd project
npm install
2
2
2
2
2
2
3.创建typescript环境
整理文件夹项目，开始构建typescript环境
1).重新整理文件
新建src文件夹，将routes，bin目录移动至src目录下，作为ts编译的入口
将app.js也移入到src目录
将bin下的www文件重命名为www.js
2).创建并配置tsconfig.json文件
使用tsc -init，会在当前目录创建tsconfig.json文件，修改配置文件
将compilerOptions里的allowJs解开注释设置为true
将compilerOptions里的outDir解开注释设置为**./build**
将compilerOptions里的rootDir解开注释设置为**./src**
将compilerOptions里的esModuleInterop解开注释设置为true
在compilerOptions同级增加exclude属性，设置值如下数组
[
"node_modules",
"views",
"public",
"build"
]
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
去掉无用项，得到最终配置项
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"allowJs": true,
"outDir": "./build",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
},
"exclude": [
"node_modules",
"views",
"public",
"build"
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
安装typescript
npm i typescript -D
3).修改package.json文件
先安装项目启动所需依赖两个的文件：nodemon，concurrently
npm i nodemon concurrently -D
增加对应的scripts脚本命令，设置完成后如下
"scripts": {
"dev:tsc": "tsc -w",
"dev:nodemon": "nodemon build/www",
"dev": "tsc && concurrently npm:dev:*",
"start": "tsc && node build/www"
}
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
4).修改app.js文件内容
引入path模块，修改静态文件以及模板文件目录
let staticPath = path.join(__dirname, '../public'); // 静态地址
let viewsPath = path.join(__dirname, '../views'); // 模板地址
app.use(require('koa-static')(staticPath))
app.use(views(viewsPath, {
extension: 'pug'
}))
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
2
3
4
5
6
5).启动项目，默认端口是3000
npm run dev 启动开发环境，每次修改完成都会实时重启项目
npm start 启动生产环境，只会启动一次项目
浏览器访问http://localhost:3000/，成功启动项目
4.typescript环境下编写接口
在routes下创建tsRoutes.ts文件
引入koa-router，现在可以使用import语法引入了，同时需要安装koa-router的类型定义文件
npm install @types/koa-router -D
import Router from 'koa-router'
const router = new Router();
router.prefix('/tsRoutes')
router.get('/', async (ctx) => {
ctx.body = {
data: [1, 2, 3]
};
})
export default router
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
在app.js引入该路由文件即可
浏览器访问http://localhost:3000/tsRoutes，成功解析ts文件
5.总结
代码已上传GitHub，链接koa2+typescript环境搭建
