koa2+typescript環境搭建

詳細實現方式以及源碼下載請前往 https://www.passerma.com/article/70

"koa2+typescript環境搭建

1.安裝koa2腳手架

全局安裝koa2腳手架  npm install -g koa-generator  

2.使用腳手架創建項目

  koa2 project  

后面的project表示項目的名稱，我這里以koa2-ts項目名為命令  koa2 koa2-ts  舉例，創建完成，生成以下目錄

 

進入項目，安裝依賴

  cd project   
  npm install  

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"
]

去掉無用項，得到最終配置項

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"allowJs": true,
"outDir": "./build",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true
},
"exclude": [
"node_modules",
"views",
"public",
"build"
]
}

安裝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"
}
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'
}))
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

在app.js引入該路由文件即可

瀏覽器訪問http://localhost:3000/tsRoutes，成功解析ts文件

 

 

5.總結

代碼已上傳GitHub，鏈接koa2+typescript環境搭建

詳細實現方式以及源碼下載請前往 https://www.passerma.com/article/70