200401.md

使用 typescript 开发 express

1. express "^4.17.1"
2. node: 10.15.3
3. ts: 3.8.3

为什么使用

1. 安全稳健：ts设计了一套类型机制来保证编译时的强类型判断，让错误的程序编译失败，所以在强类型条件约束下不会犯太大错误
2. 更加益于面向对象开发，ts提供了一套语法糖来帮助大家更方便地实践面向对象的编程

开发

初始化

进入项目文件夹

// 生成 git 仓库
git init
// 初始化 webpack 项目 得到 package.json
npm init
// 初始化 ts 项目，得到 tsconfig.json
tsc init
// 安装开发必要插件和插件 ts 说明文件
npm i express nodemon cross-env shelljs -D
npm i -g typescript ts-node
npm i @types/express @types/node -D

1. ts-node 执行 ts 文件，一定要全局安装，否则报错
2. nodemon 热更新 node 项目
3. cross-env:设置全局环境变量

文件目录

1. src/: ts 项目开发目录 . app.ts
2. dist/：ts 项目打包生成 js 目录
3. node_modules/: 插件和插件 ts 说明文件目录
4. package.json：包管理和开发脚本文件
5. tsconfig.json: ts 配置文件
6. handle-public.js: 打包静态文件

根据文件目录配置 tsconfig

{
    "compilerOptions": {
        "module": "commonjs",// 支持模块
        "target": "es2017",// 打包生成的 js 标准
        "noImplicitAny": true, // 强定义，不会把变量类型默认为 any
        "moduleResolution": "node",  // 选择模块解析策略
        "sourceMap": false,
        "outDir": "dist",  // TS文件编译后会放入到此文件夹内
        "baseUrl": ".",
        "strict": true,   // 启用所有严格类型检查选项
        "paths": {
            "*": [
                "node_modules/*",
                "./types/*"
            ]
        }
    },
    "include": [ // 配置包含的文件
        "src/**/*"
    ]
}

简单使用 ts 开发 express

app.ts

const express = require('express')
// 引入类型说明，否则 req res 编译不通过
import { Response, Request, NextFunction } from "express"

const app = express()
const port = 3000

app.get(
    '/',
    (req:Request, res:Response) => res.send('Hello World!')
)

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

配置 package.json

"scripts": {
    // 热加载 ts 文件
    "start": "cross-env NODE_ENV=develop nodemon -e ts,tsx --exec ts-node ./src/app.ts",
}

---

打包

打包静态文件

ts 不会打包静态文件，所以我们引入 shelljs 将静态文件复制到制定目录,编写脚本文件：

// src/handle-public.js
const shell = require("shelljs")
shell.cp("-R", "./src/bin", "./dist/")
shell.cp("-R", "./src/static", "./dist/")
shell.cp("-R", "./src/devFile", "./dist/")

打包命令

"scripts": {
    "start": "cross-env NODE_ENV=develop nodemon -e ts,tsx --exec ts-node ./src/bin/www",
    // 开启线上服务命令
    "serve": "cross-env NODE_ENV=production node ./dist/bin/www",
    // 打包命令
    "build": "cross-env NODE_ENV=production tsc && node handle-public.js",
}