This article was last updated on 2018-01-19 at blog.sqdyy.cn

I. Content introduction

This article describes how to build a TypeScript development environment using Visual Studio Code, where we use Express, a flexible Web application development framework, to improve our coding efficiency. We will also add nodemon to automatically monitor changes to your source code and automatically restart the server. The purpose of writing this article is to leave a mark on the ground, but also hope to have a certain reference value for some beginners.

Before reading this article, you need to have some knowledge of Webpack and Typescript syntax. Reading this article, you will get started:

  • Create the Web server using Nodejs
  • Use Express to create restful HTTP services
  • Use Nodemon to monitor server file changes and automatically restart the server

Build your WEB server

  1. So let’s create aserverFolder and usenpmCommand, we developed our server using typescript language
npm init -y
Copy the code
  1. We need to introduce node type definition files. The purpose of using type definition files is to enable you to use existing javascript libraries in typescript
npm i @types/node --save
Copy the code
  1. Since nodejs itself does not recognize typescript directly, we need to compile typescript to javascript, so create the following tsconfig.json configuration file to tell the compiler how to compile typescript to javascript. For details, see the typescript official documentation:
{
    "compilerOptions": {
        "target": "es5"."module": "commonjs"."emitDecoratorMetadata": true."experimentalDecorators": true."outDir": "build"."lib": [
            "es6"]},"exclude": [
        "node_modules"]}Copy the code

  1. We need to tell vscode to use this configuration file to compile our typescript, using the CTRL +shift+b shortcut to generate the solution.

  2. Now that our development environment is configured, let’s start writing our server file. Let’s start by creating a server/hello_server.ts file.

import * as http from 'http';

const server = http.createServer((req,resp) => {
    resp.end("Hello Node!");
});

server.listen(8000);
Copy the code
  1. Performed againctrl+shift+bCompile this file, first execution will improve the lack.vscode/tasks.jsonFile, create it and continue executingctrl+shift+b, according to thetsconfig.jsonThe configuration will be inbuildDirectory to generate compiled javascript code:
// build/hello_server.js
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var http = require("http");
var server = http.createServer(function (req, resp) {
    resp.end("Hello Node!");
});
server.listen(8000);
Copy the code
  1. Now we can start our node server from this file by executing the following command to start the server and then accesslocalhost:8000:
node build/hello_server.js
Copy the code

Use the Express framework to simplify development

Express is a fast, open and minimalist Web development framework based on the Node.js platform. The reason for using it is simple. We use the original Node for development, which requires us to handle many problems manually, such as reading files, routing requests, and handling different types of requests. Using Express can help you do these things faster. So you should go to its website and learn about it.

  1. First we installexpressFramework:
npm install express --save
Copy the code
  1. And then we introduceexpressType definition file for:
npm install @types/express --save
Copy the code
  1. Now that we can use the express API with typescript code, we create a new server configuration fileserver/auction_server.ts:
import * as express from 'express'; const app = express(); // Declare a service that handles GET requests app.get()'/', (req, resp) => {
    resp.send("Hello Express");
});

app.get("/products", (req, resp) => {
    resp.send("Commodity query request received");
});

const server = app.listen(8000, "localhost", () => {
    console.log("The server is started at http://localhost:8000");
});
Copy the code
  1. Now let’s implementctrl+shift+bAnd then throughauction_server.jsFile to start node server:
node build/auction_server.js
Copy the code

Use the Nodemon tool to automatically reload the server

We have learned to build a node server, but it is very inconvenient, and the server does not automatically restart when we change the project code. This is very annoying and a waste of time, so someone developed nodemon, a tool that automatically reboots. Let’s install it.

1. First we install Nodemon:

npm install -g nodemon
Copy the code

2. Run the following command to start the server:

nodemon build/auction_server.js
Copy the code

If you’re interested, see this article: Building nodeJS of typescript with VSCode to automatically compile and start the service