Method steps for writing an express server using TS

1. Preface

As front-end developers, ts has become an essential skill. Type checking can help us avoid unnecessary bug during redevelopment. Moreover, the syntax of classes and decorators supported by ts is closer to the back-end language and more suitable for server development.
This article will build an express server that integrates ts and eslint syntax checking from scratch.

2. Initialize the express framework

We can use the official express generator to quickly generate the express framework.
Of course, the initialization content of express is not complicated, and you can also build your favorite framework mode from an app. js.

#  Use express The generator must be installed globally before express-generator
$ npm install -g express-generator

# --view The next step is to determine which view engine you use. server Is the name of your project 
$ express --view ejs server

#  The generated project will not be added to us by default git Here we use git init Initialization 1 Under 
$ git init

After initialization, we add a. gitignore file

node_modules/
dist/

3. Add TS support

Install TS globally

ts itself belongs to the superset of js. node and the browser do not know it. It needs to be compiled into js before execution. Therefore, if ts has not been installed globally, it needs to be installed globally under 1

$ npm install -g typescript

Installing express type dependencies

express is based on the node environment, so we need to install two type dependencies to get the type hints of the relevant api

$ npm install @types/node --save-dev

$ npm install @types/express --save-dev

Configure the tsconfig. json file

Create a new tsconfig. json file in the project root directory. outDir represents the packaged output path

{
 "compilerOptions": {
  "target": "es2016",
  "module": "commonjs",
  "lib": ["es2016","dom"],
  "outDir": "./dist",
 },
 "exclude": ["node_modules"]
}

If the include or files options are included here, all ts files will not be compiled by default.

Next, we can change the suffix of all js files of the project to. ts, and then run it directly from the command line

$ tsc

By default, we will find the tsconfig. json file in the root directory, and help us compile it according to the configuration. After compiling, we can see that the dist folder has compiled all ts files into js files, and kept the original directory structure.

Next, we put other resources in the directory into the dist folder, and then run

$ node ./dist/bin/www

At this time, our service can start normally, but if we have to compile every time we run it during development- > Move resource files into- > The process of running commands is too cumbersome, so we will add a third-party library ts-node.

Compile ts files in memory using ts-node

A global installation is required before using ts-node

$ npm install ts-node -g

#  Use ts-node Run the project directly, and this library will change our ts File is compiled into js Files are stored in memory for reference 
$ ts-node ./bin/www

Although ts-node can help us run ts files directly, it is recommended to use js files packaged with tsc for more stability when deployed in production environment after development.

Use nodemon for hot updates

Install nodemon globally

$ npm install nodemon -g

#  Execute the command to run the project 
$ nodemon -e ts --exec ts-node ./bin/www

-e: Represents the specified watch list (Specifying extension watch list)
--exec: Executes a command on behalf of the command line

Configuring npm scripts

"scripts": {
 "start": "ts-node ./bin/www",
 "dev": "nodemon -e ts --exec ts-node ./bin/www",
 "build": "tsc",
 "server": "node ./dist/bin/www"
}

4. Configure eslint

Why not tslint?

TSLint is deprecated.
See this issue for more details: Roadmap: TSLint → ESLint. If you 're interested in helping with TSLint/ESLint migration, please check out our OSS Fellowship program.

This is the answer given by the tslint team, and typescript-eslint is recommended at present.

Configure eslint for your project

node_modules/
dist/

0

The initialization steps of eslint are relatively simple and easy to understand, which will not be described here. The key one is Does your project use TypeScript? · ES 206EN

The project initialized with the command line of eslint has not started checking the syntax related to ts. Here, we need to add two configurations in the. eslintrc. js file

node_modules/
dist/

1

Next we will see ts file 1 heap of error, you can happily install ts syntax to modify!

Tip: ts does not fully support the modular syntax of commonjs, so it is easy to encounter various errors when using require and module. exports, and the official also

Some solutions are recommended, and it is recommended to enable ES module import mode here

node_modules/
dist/

2

In this way, we can use import and export of es 6 for modularization in the project, and ts compiles our code for compatibility according to the environment at compile time.

5. Summary

This article is I build their own express server and integrated ts development records of some operations, if there are mistakes, please give more advice!