从头搭建(TypeScript)Koa开发基础

前言

近段时间在公司一直在进行Java后端相关的开发，整天面对着，Spring Boot、MyBatis Plus，Activiti 巴拉巴拉的，真的是妄为一名Node后端开发。所以最近为了不能荒废自己的Node，所以重新拾起了进行学习，然后就想要学习TS。我以前也是有用过TS进行开发的，但是并没有从基础上来学习学好TS，一直都是直接后端Nest.js,前端Angular.js打开电脑就直接开搞。没有TS基础就边了解TS一边TS，js混和写了一堆傻逼代码。现在为了更好的学习TS所以打算开始从最基础的学习。使用TS+Koa来进行学习，尝试是否可以从基础实现到类似Nest.js的效果。本章要记叙的是如何搭建一个TS+Koa的开发基础环境。

Ⅰ.创建项目，安装依赖

第一步先把项目创建出来和把依赖给装上，这里要用到的依赖有, TypeScript, Koa, Koa-body, nodemon

首先把TypeScript给装上，用npm全局安装到电脑

	npm install -g typescript

创建项目打开vscode ，进入到项目文件夹，ctrl+`打开 Terminal输入命令初始化项目，以及从初始化ts配置

	npm init
    tsc --init

初始化完成之后就开始安装依赖了

	# 安装Koa
	npm install -save Koa
	# 安装Koa body 解析插件
    npm install -save Koa-body
	# 安装 nodemon 监听文件修改，用于热重启项目
    npm install -save nodemon

安装完了依赖之后还要安装一下相关的 d.ts 文件为了给编辑器加上对应的代码提示

	# 安装Koa d.ts
	npm install -save @types/Koa

现在项目就已经创建完毕了，并且安装好了初步需要依赖了。

Ⅱ配置

接下来就是要进行一下项目的配置了

先配置一下 tsconfig.json

{
  "compilerOptions": {
    "target": "ES2016", /* 将TS编译成目标版本js 'ES3' (默认), 'ES5', 'ES2015', 'ES2016'*/
    "module": "commonjs", 
    "outDir": "./dist/",  /* 编译输出文件夹 */
    "rootDir": "./src/", /* 项目源码文件夹 */
    "strict": true, 
    "esModuleInterop": true, 
    "skipLibCheck": true, 
    "forceConsistentCasingInFileNames": true 
  }
}

再继续配置 nodemon.json 当前配置是配置 nodemon 监听的相关参数

{
    "verbose": true,
    "ignore": [
        "*.test.js",
        "fixtures/*"
    ],
    "execMap": {
        "rb": "ruby",
        "pde": "processing --sketch={{pwd}} --run"
    },
    "watch": [
        "src/" /* 监听的路径 */
    ]
}

然后继续配置 package.json


{
  "name": "demo1",
  "version": "1.0.0",
  "main": "app.js",
  "license": "MIT",
  "scripts": {
    /* 启动的时候先编译 ts 然后再运行编译出来的文件 */
    "start": "tsc --build && node ./dist/app.js",
    /* 启动监听器运行项目 */
    "watch": "nodemon --ext js,ts --exec yarn start"
  },
  "dependencies": {
    "@types/koa": "^2.11.4",
    "koa": "^2.13.0",
    "koa-body": "^4.2.0",
    "nodemon": "^2.0.4"
  }
}

好的配置完毕！

Ⅲ编写运行代码

弄了半天终于搞定了上面的依赖以及配置之后终于可以来编写代码了，先在项目根目录创建两个文件夹，dist用于存储编译输出文件，src 代码源文件。

然后在src中创建app.ts开始写代码。其实用起来跟js编写的差不多。

import Koa from "koa";
import bodyParser from "koa-body";

const app:Koa = new Koa();

app.use(bodyParser())

app.use((ctx: Koa.DefaultContext) => {
    console.log(ctx.request.body)
    console.log("hello")

    ctx.body = "hello world！";
})

const port: number = 3000;
app.listen(port, () => {
    console.log(`seccess start server`)
    console.log(`local: http://127.0.0.1:${port}`)
})

写完之后就可以运行代码了

	# 编译ts 运行代码
	npm run start
    # 通过监听器运行代码
    npm run watch

结尾

这一个基础的开发框架算是弄好了。虽然简单但是在我搞的时候，网上教程这一块那一块的算是折腾了我半天才搞定这个东西。接下来就继续跟这这个继续进行学习TS，希望能通过这个项目可以对TS进行一个系统的入门。