node项目(express)从零开始构建TypeScript

1、标注：本案例使用ejs模板，express框架，编辑器为vscode

2、开始准备工作，首先全局安装express、typescript、ts-node,nodemon，网络不好用cnpm

npm i express -g//全局安装express
npm i -g typescript//全局安装ts编译工具
npm i -g ts-node//全局安装ts运行工具
npm install -g nodemon//全局安装nodemon

3、然后开始新建一个node项目，打开vscode，控制台cd进入到自己指定的文件位置，输入以下命令(注意：case3为项目名称)，会得到下面的目录结构

express --view=ejs case3

4、做出如下整改

5、cd case3进入该项目，输入cnpm i安装依赖文件

6、控制台输入tsc --init，得到ts的配置文件(tsconfig.json)

7、修改ts的配置文件如下:

8、将app.js修改为app.ts，并将bin目录下的www文件修改对应位置，将默认的../app修改为../dist/app（这里的dist对应第七步outDir的保存路径），如下图：

9、安装concurrently，输入cnpm i concurrently -D

10、打开package.json文件，配置以下信息

"dev:start": "nodemon ./bin/www",//node运行指定的文件
"dev:build": "tsc -w",//实时编译ts文件
"serve": "concurrently npm:dev:*"//同时运行以dev开头的命令

11、至此，所有的准备工作都已完成，下面将进行讲解简单的案例

12、打开app.ts，写入以下代码

import express from "express";
const app = express();

app.get("/",(req,res)=>{
    res.send("Hello TypeScript");
});

app.listen("7001",()=>{
    console.log("http://localhost:7001");
});
module.exports = app;

13、会发现有好几处报错，鼠标移动到指定位置上有对应的报错说明信息，下一步将解决这几处报错

14、控制台输入cnpm install @types/express -D，然后再输入cnpm i @types/node -D，这两个(express、node)都是ts的解释文件，完成之后，报错信息已消失

15、在req与res上增加ts标识

16、此时我们尝试运行项目，控制台输入cnpm run serve，可能此时会报文件找不到的错误(问题的原因是tsc还没有来得及编译完成，nodemon就已经执行完毕了导致的)，所以不着急，我们关掉再重新运行一次即可

17、重新运行发现已正常，此时浏览器输入对应地址，正常显示出来即可

18、接下来改进app.ts代码，我们使用下路由，routes文件夹下新建routes.ts，如下图：

import {Router,Request,Response} from "express";

const router:Router = Router();
router.get("/",(req:Request,res:Response)=>{
    res.send("Hello Typescript");
});
router.get("/info",(req:Request,res:Response)=>{
    res.send("Info Page");
});

export default router;

19、改进app.ts

import express from "express";
import routes from "./routes/routes"
const app = express();
app.use("/",routes);

app.listen("7001",()=>{
    console.log("http://localhost:7001");
});
module.exports = app;

20、控制台会自动编译，打开浏览器，进入到对应路由，发现界面正常。

21、每次修改文件，都会实时触发tsc -w进行编译，然后会将编译文件存放到dist文件夹中，dist的文件内容一改变，就会触发nodemon，原理就这样，这样就达到了实时编译与实时运行；至此此教程结束，谢谢