preface

Recently in the company has been in the Java backend related development, all day face, Spring Boot, MyBatis Plus, Activiti bala Bala, really is a rantless Node backend development. So recently, in order not to waste their Own Node, so I picked up again to learn, and then I want to learn TS. I used to use TS for development, but I didn’t learn TS well from the basics. I always used to directly back-end Nest.js and front-end Angular.js when I opened the computer. Knowing TS without TS foundation, JS wrote a bunch of stupid code. Now in order to better learn TS, I plan to start from the most basic learning. Use TS+Koa to learn and see if you can achieve something like Nest.js from the basics. This chapter describes how to set up a TS+Koa development infrastructure.

ⅰ. Create a project and install dependencies

The first step is to create the project and install the dependencies. The dependencies used here are TypeScript, Koa, koa-body and Nodemon

Install TypeScript first and install it globally with NPM

	npm install -g typescript
Copy the code

Create project open vscode, go to the project folder, CTRL + ‘open Terminal input command to initialize the project, and initialize the ts configuration from

	npm init
    tsc --init
Copy the code

Once the initialization is complete, the dependencies are installed

# install Koa NPM install-save Koa # install Koa NPM install-save Koa # install Koa NPM install-save Koa Used to hot restart the project NPM install-save nodemonCopy the code

After installing the dependencies, you should also install the associated d.ts file to add code hints to the editor

Types of types/KoaCopy the code

The project is now created and the initial dependencies are installed.

Ⅱ configuration

The next step is to configure the project

Let’s configure tsconfig.json

{
  "compilerOptions": {
    "target": "ES2016"./ * TS compiled into target version js' ES3 '(the default),' ES5 ', 'ES2015', 'ES2016 * /
    "module": "commonjs"."outDir": "./dist/"./* Compile output folder */
    "rootDir": "./src/"./* Project source folder */
    "strict": true."esModuleInterop": true."skipLibCheck": true."forceConsistentCasingInFileNames": true}}Copy the code

Then continue to configure nodemon.json. The current configuration is to configure the parameters that nodemon listens to

{
    "verbose": true."ignore": [
        "*.test.js"."fixtures/*"]."execMap": {
        "rb": "ruby"."pde": "processing --sketch={{pwd}} --run"
    },
    "watch": [
        "src/" /* Listen to the path */]}Copy the code

Then continue to configure package.json


{
  "name": "demo1"."version": "1.0.0"."main": "app.js"."license": "MIT"."scripts": {
    /* Build ts and then run the compiled file */
    "start": "tsc --build && node ./dist/app.js"./* Start the listener to run the project */
    "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"}}Copy the code

Good configuration complete!

Write running code

After working on the dependencies and configuration above, I was ready to write the code. First, I created two folders in the project root directory, dist for compilation output files and SRC code source files.

Then create app.ts in SRC and start writing the code. In fact, with JS written almost the same.

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}`)})Copy the code

When you’re done, you can run the code

NPM run start NPM run watchCopy the code

At the end

This is a basic development framework is ready. It was simple, but in my time, it took me a long time to figure out how to do it. Next, I will continue to learn TS with this project, hoping to make a systematic introduction to TS through this project.