Node.js + Express + TypeScript 實現一個簡單的登錄註冊功能（一） 初始化服務

前言

不少時候，咱們在學習了某個新東西之後，殊不知道如何在項目中運用本身學到的新東西。本篇旨在使用 Node.js + TypeScript 實現一個簡單的登錄註冊後臺服務器，以此更加深刻的理解 ts 在實際開發中的運用。

基礎知識

閱讀本篇專欄前，你須要掌握如下知識：

1. 掌握 JavaScript 基礎；
2. 瞭解 Node.js 及 Express 框架；
3. 瞭解 TypeScript 基本知識，可參考 TypeScript 要點知識整理。

從需求出發

如今咱們須要實現一個登錄註冊的服務器，進行分析，列舉出如下需求：

• 註冊功能

1. 用戶可經過輸入用戶名和密碼進行註冊；
2. 用戶名要求惟一；
3. 註冊成功後，默認自動登錄系統，返回對應用戶標識（即 Token）給前端。

• 登錄功能

1. 用戶經過輸入用戶名和密碼進行登錄；
2. 後臺進行用戶名和密碼的校驗，校驗不經過返回「用戶或密碼錯誤」的提示；
3. 登錄成功後，返回用戶對應的標識。

項目初始化

1. 建立項目文件夾 simple-login-node，進入文件夾；
2. 進入項目文件夾，經過 npm init ，tsc --init 以及 tslint --init 初始化項目，初始化前，請確保已全局安裝過 npm、typescript 以及 tslint，可經過如下命令進行安裝；

npm install -g npm
npm install -g typescript
npm install -g tslint
複製代碼

3. 在根目錄下建立 /src 目錄，在目錄下創建 app.ts 文件。

進行以上操做後，咱們的目錄結構以下：

具體文件說明

/src/app.ts // 程序入口文件
.npmrc // 項目 npm 配置文件，可針對項目單獨設置 npm 的配置
package.json // 項目模塊描述文件
tsconfig.json // typescript 配置文件
tslint.json // tslint 配置文件
複製代碼

以上就是一個使用 typescript 編寫的 node.js 項目的基本結構，咱們來進一步細分，每一個配置有哪些重要的配置呢？

package.json

• scripts
  配置指令集合，當咱們使用 npm run * 的時候，* 表示咱們在 script 節點下配置的指令。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
}
複製代碼

以上配置，當咱們執行 npm run test的時候，實踐會將 test 後配置的語句進行執行，即 echo "Error: no test specified" && exit 1

• dependencies
  在項目下使用 npm install --save * 安裝的包，及其版本
• devDependencies
  在項目下使用 npm install --save-dev * 安裝的包，僅在開發模式下安裝。由於 typescript 僅在編譯時檢查代碼，即僅在開發時有效，所以不少 typecript 相關模塊以及帶聲明文件的第三方模塊僅在開發模式下安裝。
  下面咱們安裝 express 模塊，在項目根目錄下運行：

npm install --save express // 安裝普通 express 模塊，並在 dependencies 下生成包記錄
npm install --save-dev @types/express // 安裝帶有聲明文件的 express 模塊，並在 devDependencies 下生成包記錄，僅開發模式下安裝。
複製代碼

此時 package.json 以下（僅貼關鍵代碼）：

"dependencies": {
  "express": "^4.17.1"
},
"devDependencies": {
  "@types/express": "^4.17.0"
}
複製代碼

tsconfig.json

若是一個目錄下存在存在 tsconfig.json 文件，那麼就意味着這個目錄是 typescipt 項目的根目錄。tsconfig.json 定義了用來編譯這個項目的根目錄及編譯選項。讓咱們一塊兒來看看其中的一些關鍵配置項。

{
  /* 編譯選項 */
  "compilerOptions": {
    "target": "es6", // 指定 EECMAScript 的目標版本, 這裏咱們採用 es6
    "module": "commonjs", // 指定編譯生成哪一個模塊的系統代碼，考慮到兼容性，這裏咱們設置成 commonjs
    "outDir": "dist", // 編譯輸出目錄，即 .ts 文件編譯成 .js 文件後的輸出目錄。這裏設置爲根目錄下的 /dist 目錄
    "strict": true, // 嚴格模式
    "noImplicitAny": false, // 在表達式和聲明上有隱含的 any類型時報錯。設爲 false 避免當類型推論爲 any 時報錯
    "moduleResolution": "node", // 決定如何處理模塊。設置爲 node
    "baseUrl": "./", // 定義 ts 項目的根目錄，設置 paths 前必須設置
    //定義路徑別名,即當咱們經過路徑引入一個模塊時，可使用別名來進行引入，這裏第一個 * 設置是爲了引入第三方模塊; 第二個 '@/*' 則是爲了直接快捷的導入 /src 下的模塊。
    "paths": {
      "*": ["node_modules/*", "src/types/*"],
      "@/*": ["src/*"]
    }
    "esModuleInterop": true // 模塊導入方式
  },
  "include": ["src"], // 須要編譯的 ts 文件，這裏設置爲 src 目錄下的全部文件
  "exclude": ["node_modules"] // 編譯須要排除的文件目錄
}
複製代碼

tslint.json

tslint 配置文件，用於檢查代碼是否符合設置的代碼規範，不符合將會提示對應錯誤，具體設置請看文章最後的源碼。

搭建 express 服務

1. 安裝 body-parser 模塊，用於處理 post 請求的請求體

npm install --save body-parser
複製代碼

2. 在 /src 目錄下創建 config 目錄下，目錄下創建 index.ts，用於存放項目的一些開修改配置，咱們將 Express 服務佔用的端口寫在其中，代碼以下：

const systemConfig = {
  port: 8000,
};

export default {
  systemConfig,
};
複製代碼

3. 咱們這但是 typescript 項目，咱們試着定義一下 配置中 systemConfig 變量的類型，在 /src 目錄下創建 types 目錄，用於存放項目的全部類型定義，在 /types 下創建 config.ts 文件，對類型進行定義，並在配置文件中引入

// /src/types/config.ts
export interface ISystemConfig {
  port: number;
}

// /src/config/index.ts
import { ISystemConfig } from "@/types/config";

const systemConfig: ISystemConfig = {
  port: 8000,
};
複製代碼

這樣就限定了 systemConfig 對象下只有一個屬性 port，且類型爲 number，而且這樣咱們在使用 systemConfig 時，將會有代碼提示其內部屬性哦。
4. 在 /src/app.ts 下建立 Express 服務

// 第三方模塊
import bodyParser from 'body-parser';
import express from 'express';
import { NextFunction, Request, Response } from 'express'; // express 申明文件定義的類型

// 自定義模塊
import { systemConfig } from './config';

const app = express();

// 處理 post 請求的請求體，限制大小最多爲 20 兆
app.use(bodyParser.urlencoded({ limit: '20mb', extended: true }));
app.use(bodyParser.json({ limit: '20mb' }));

// error handler
app.use(function(err: Error, req: Request, res: Response, next: NextFunction) {
  return res.sendStatus(500);
});

app.listen(systemConfig.port, function() {
  console.log(`the server is start at port ${systemConfig.port}`);
});

export default app;
複製代碼

項目運行

大功告成，咱們來運行試試

node ./src/app.ts
複製代碼

可是。。語法錯誤

這時候咱們想起來， ts 文件是沒法直接運行，咱們來先編譯一下本身的 ts 代碼，在根目錄運行

tsc
複製代碼

還記得咱們以前在 tsconfig.json 中設置了 編譯後的 js 代碼的輸出目錄爲 /dist 目錄，咱們執行命令後，能夠看到 /dist 目錄在根目錄下生成了！

來看看 dist 目錄下結構

能夠看到，全部代碼都生成了對應的 js 代碼，且目錄結構與 ts 代碼目錄結構一致。 咱們運行 app.js 看看

耶！成功了！咱們瀏覽器訪問看看

由於沒有定義具體的接口，因此返回了 「Cannot Get /」，可是咱們服務器已經啓動了！

一個問題

難道咱們更新了代碼都要從新編譯，而後在啓動服務嗎？

解決辦法

安裝 nodemon 以及 ts-node 用於監控 指定目錄 ts 代碼的改動，改動後自動編譯運行項目。

// 僅開發環境安裝
npm install --save-dev nodemon // nodemon 用來監視node.js應用程序中的任何更改並自動重啓服務
npm install --save-dev ts-node // ts-node 命令可直接執行 TypeScript 源文件而不須要預先編譯
複製代碼

安裝完成後，咱們使用 nodemon 監控 /src 下全部 ts 文件的改動，當改動發生後，使用 ts-node 直接從新app.ts。命令以下：

nodemon --watch 'src/' -e ts --exec 'ts-node' ./src/app.ts
複製代碼

能夠看到，當咱們改動 config 中端口號爲 8001 後，項目真的有自動重啓，棒棒噠！

根據 ten_noc 的提醒，在windows下，腳本命令會提示找不到ts-node，須要安裝cross-env，而後將啓動命令修改成:

cross-env nodemon --watch 'src/' -e ts --exec 'ts-node' ./src/app.ts
複製代碼

優化一下

能夠看到，上面那條啓動命令有點兒長，每次都輸入這麼一長串是否是不太友好！那麼有沒有簡化的方式呢？有！還記得前面咱們說過，package.json 中能夠配置啓動腳本！

//  在 script 標籤中加入 dev 配置
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon --watch 'src/' -e ts --exec 'ts-node' ./src/app.ts"
  }
複製代碼

而後咱們只要運行 npm run dev 就能夠啓動項目了，看看效果

耶！給本身一個贊0.0

總結及源碼

本篇初步搭建了一個基於 typecript 的 express 服務，下篇文章將會繼續講解 mongodb 的鏈接。關於 typescript，筆者也是在學習過程當中，若是有不足的地方歡迎各位大佬在評論區指出。若是你以爲對你有幫助的話，不要忘了點贊和關注哦^o^
本節源碼地址：github.com/liyuezu/sim…