基于expressgenerator创建TypeScript+Express+MySQL后端项目（详细版）

app.ts改造

在app.ts当中，把所有的CommonJS语法的同步引入require全部换成ES6的import异步引入即可。如：

var express = require('express');

换成：

import express from "express";

然后把末尾的模块导出也换成export default默认导出。

module.exports = app;

换成：

export default app;

然后把里面所有的var全部换成const。

上述步骤完成之后，会发现有很多的包引入错误：

因为我们还没有安装对应包的类型声明。

运行以下命令进行安装：

npm install @types/node @types/express @types/http-errors @types/cookie-parser @types/morgan @types/debug -D

下面两个路由的报错，我们按照改造app.ts的前三步对路由文件进行改造就可以了，也就是把引入模块、导出模块的方式改一下，然后把var改成const就可以。

把上面的类型报错解决了之后，app.ts中只剩下错误处理器的4个报错：

比较明显，是因为参数类型推断不出来。我们在最后加一个对这个函数的Express中错误处理函数的类型推断就可以了：

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render("error");
} as express.ErrorRequestHandler);

至此，app.ts的报错就已经全部解决了。

server.ts改造

也和改造app.ts同理，先把require换成import，然后把var全换成const。因为没有导出，所以不用改导出方式。

完成后，会发现三个报错：

其中的val和error报错，可以直接加个any解决报错；最下面的addr的报错，根据提示是因为：

因为addr可能为null，所以不能用.选择属性。因为我们这边确定addr不为null，所以我们只用加上非空断言操作符!就可以了。

function onListening() {
  const addr = server.address();
  const bind = typeof addr === "string" ? "pipe " + addr : "port " + addr!.port;
  debug("Listening on " + bind);
}

至此，server.ts的报错就已经全部解决了。

配置tsconfig.json输出目录+package.json启动运行脚本

上面的两步都处理好之后，就可以进行编译输出目录的配置。因为最后我们启动服务还是需要采用JavaScript的形式，TypeScript只是我们编写代码的工具。

打开tsconfig.json，找到"outDir"配置项，把它打开，并配置编译输出的目录"./dist"：

但是要注意，ts只是将编译的文件放入到了dist中，但是public和views这些静态的资源没有被打包进去。

所以要再继续配置静态资源的打包路径。我们在这里使用shelljs进行配置。

ShellJS是一个基于Node.js的包，它提供了一组简单的命令行工具，让你可以在Node.js环境下使用类似于Unix shell（如Bash）的命令。它在Node.js中提供了一个简单的、易于使用的接口，用于执行常见的Shell命令、操作文件系统和进行其他常见的命令行任务。

安装shelljs及其声明文件：

npm i shelljs @types/shelljs -D

在根目录新建一个文件：copyStatic.ts，代码如下：

import * as shelljs from "shelljs";

shelljs.cp("-R" , "public" , "dist");
shelljs.cp("-R" , "views" , "dist");

这段代码的用途是将当前目录中的public目录和views目录，以及它们的所有子目录和文件，递归地复制到名为dist的目录中。

安装nodemon模块，可以自动监听项目文件的变化，会自动的重启项目：

npm install nodemon -D

完成后，在package.json内部修改脚本：

{
  // ...
  "scripts": {
    "start": "nodemon ./dist/bin/server.js",
    "copy-static": "ts-node copyStatic.ts",
    "ts-build": "tsc",
    "build": "npm run ts-build && npm run copy-static"
  },
  // ...
}

• start：对应启动服务。
• copy-static：使用ts-node运行copyStatic.ts文件内容，拷贝静态文件资源到dist目录下。
• ts-build：运行tsc，打包ts项目，根据outDir输出到对应的目录下。在我们这边就是dist目录下。
• build：就是第二条+第三条命令一起运行。

完成后，在tsconfig.json增加：

{
  "compilerOptions": {
    //...
  },
  “exclude”: [
    “copyStatic.ts”
  ]
}

以排除对copyStatic.ts文件的编译，不打到dist里面。

和MySQL数据库建立连接

上述步骤完成之后，就可以开始建立和MySQL数据库的连接了。

首先安装mysql相关的依赖：

npm install mysql @types/mysql -D

然后在根目录下新建database目录，再在里面新建index.ts文件，之后再里面就可以配置自己想要链接的数据库选项了。下面给出模板：

// 导入mysql模块
import mysql from "mysql";

// 创建数据库连接对象
const db = mysql.createPool({
  host: "你想连接的数据库的IP地址，本地的就默认127.0.0.1",
  user: "你的用户名",
  password: "你的密码",
  database: "你想连接到的数据库",
});

// 向外共享db数据库连接对象
export default db;

上述文件编写好了之后，就可以导入它，并在对应的接口中进行数据库的操作了，这个放在后面说。

routes和controller分离

原本的express-generator给我们生成的routes目录下的文件：index.ts和users.ts都是把接口请求的url和接口的具体逻辑全部放在一起了，这样使得代码冗杂而不易于维护。因此，最好是把具体的逻辑处理函数和接口路径的注册两者分开来存放，在controller目录下定义好对应的处理函数后在末尾导出，最后在routes中对应的文件中进行引入即可。

以原本的index.ts文件为例：

import express from "express";
const router = express.Router();

/* GET home page. */
router.get("/", function (req, res, next) {
  res.render("index", { title: "Express" });
});

export default router;

按照上述原则，我们应该把前面的url和后面的函数分开来进行存放。我们在根目录下新建controller目录，并在里面新建index.ts文件，内部具体的代码如下：

import db from "../database/index"; // 引入mysql数据库连接模块
import type { Request, Response } from "express"; // 引入express内部的类型定义

// 定义controller函数类型
const indexController: {
  [key in string]: (req: Request, res: Response) => void;
} = {};

// 添加对应的接口↓
indexController.firstapi = (req, res) => {
  res.send("Hello World!");
};

export default indexController;

然后，在routes里面的index.ts文件里面引入：

import express from "express";
import indexController from "../controller";
const router = express.Router();

router.get("/", indexController.firstapi);

export default router;

这样，我们就实现了业务和接口本身分离的模式，易于接口的注册和业务的维护。

最后，有关于db的使用方式，在这里不详细赘述（因为这单独讲会讲很多），没基础有兴趣的同学可以直接开始学习express框架哦！

类型定义分离daos

当然，在定义接口的时候自然免不了对于某个数据类型的定义，因此可以在根目录新建daos目录，内部存放相关的提前定义好的interface或者是type，便于在controller的具体业务逻辑内部进行引用，规范化代码的编写。在这边我就先不展示了。