preface

Ts has become an essential skill for front-end developers. Type checking can help us avoid unnecessary bugs in development. As technologies mature, server-side TS writing is becoming more and more popular. This article will document how to build a typescript + Express + ESLint project from scratch.

Install dependencies

npm i -D typescript npm i -D ts-node npm i -D nodemon npm i -D @types/node npm i -D @types/express npm i -D eslint npm i  -D eslint-plugin-prettier npm i -D prettierCopy the code

The configuration file

Configuration eslint

Execute esLint –init and select the appropriate content as prompted.

√ How would you like to use ESLint? · Style √ What type of modules does your project use? · CommonJS √ Which framework does your project use? · None √ Does your project use TypeScript? · No/Yes √ Where does your code run? · Browser √ How would you like to define a style for your project? · Guide √ Which style guide do you want to follow? · Standard √ What format do you want your config file to be in? · JavaScript Checking peerDependencies of eslint-config-standard@latest The config that you've selected requires The following dependencies: @typescript-eslint/eslint-plugin@latest eslint-config-standard@latest eslint@^7.121. eslint-plugin-import@^2.221. eslint-plugin-node@^11.1. 0 eslint-plugin-promise@^4.21.| | ^5.0. 0@typescript-eslint/parser@latest √ Would you like to install them now with NPM? No/YesCopy the code

An.eslintrc.js file will be automatically generated in the root directory. By default, the file will look like this. If you need to customize any rules, you only need to add them in rules.

module.exports = {
  env: {
    browser: true.commonjs: true.es2021: true
  },
  extends: [
    'standard'].parser: '@typescript-eslint/parser'.parserOptions: {
    ecmaVersion: 12
  },
  plugins: [
    '@typescript-eslint'].rules: {}}Copy the code

Configuration tsconfig. Json

The following is the basic configuration. For more complex and detailed information, please go to the official website.

{
  "compilerOptions": {
    // Compile options
    "target": "es2016".// Compile the target code version standard
    "module": "commonjs".// The modular standard used by the compile target
    "lib": [
      "es2016"."DOM"].// Specify the ts environment
    "outDir": "./dist".// Compile the result location
    "removeComments": true.// Comments are removed as a result of compilation
    "strictNullChecks": true // In strict null-checking mode, null and undefined are not included in any type. Only void and its corresponding type are allowed to be assigned
  },
  "include": [
    "./src"
  ] // Specify the scope of TSC compilation
  / / "files" : ". / SRC/index. The ts "] / / compile the specified file, delete "include" configuration
}
Copy the code

Configuration package. Json

Add the following statement to the scripts field of package.json.

  "scripts": {
    "dev": "nodemon --watch src -e ts --exec ts-node src/app.ts",},Copy the code

–watch SRC: checks only the SRC folder

-e ts: detects only. Ts files

Initialize the Express service

Create SRC /app.ts in the root directory

// Reference the Express framework
const express = require('express')
// Create a registration page route
const router = express.Router()

// Matches the secondary request path
router.get('/login'.(req, res) = > {
  res.send('hello world1234567')})// Create a web server
const app = express()

// Match the level 1 request path for the route
app.use('/user', router)

// Listen on the port
app.listen(3000.() = > {
  console.log('Server started successfully')})Copy the code

Start the service

Run the NPM run dev command to start the local project.

> nodemon --watch src -e ts --exec ts-node src/app.ts
[nodemon] 2.012.
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): src\**\*        
[nodemon] watching extensions: ts
[nodemon] starting `ts-node src/app.ts`The server is started successfully.Copy the code

Now that the infrastructure is complete, it’s time for the fun of typing code.