初始化项目

mkdir server && cd server
npm init -y

安装express

yarn add express

在开发环境中我们将要使用Typescript编写代码。所以我们需要安装typescript。另外也需要安装node和express的类型声明。安装的时候带上- D参数来确保它是开发依赖

yarn add -D typescript @types/express @types/node

安装好之后，还有一点值得注意，我们并不想每次代码更改之后还需要手动去执行编译才生效。这样体验太不好了！所以我们需要额外添加几个依赖

• ts-node: 这个安装包是为了不用编译直接运行typescript代码，这个对本地开发太有必要了'
• nodemon：这个安装包在程序代码变更之后自动监听然后重启开发服务。搭配ts-node模块就可以做到编写代码及时生效。

因此这两个依赖都是在开发的时候需要的，而不需编译进生产环境的。

 

配置Typescript文件

为我们将要用的typescript设置配置文件，创建tsconfig.json文件

touch tsconfig.json

现在让我们给配置文件添加编译相关的配置参数：

• module: "commonjs" — 如果使用过node的都知道，这个作为编译代码时将被编译到最终代码是必不可少的。
• esModuleInterop: true — 这个选项允许我们默认导出的时候使用*代替导出的内容。
• target: "es6" — 不同于前端代码，我们需要控制运行环境，得确保使用的node版本能正确识别ES6语法。
• rootDir: "./" — 设置代码的根目录为当前目录。
• outDir: "./build" — 最终将Typescript代码编译成执行的Javascript代码目录。
• strict: true — 允许严格类型检查。

最终tsconfig.json文件内容如下：

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "rootDir": "./",
    "outDir": "./build",
    "strict": true
  }
}

 

配置package.json脚本

我们需要添加几个脚本：第一个是start启动开发模式，另一个是 build打包线上环境代码的命令。

启动开发模式我们需要执行nodemon server.ts，而打包生产代码，我们已经在tsconfig.json中给出了所有需要的信息，所以我们只需要执行tsc命令。

此刻下面是你package.json文件中所有的内容，也可能由于我们创建项目的时间不一样，导致依赖的版本号不一样。

 

# package.json
{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "start": "NODE_ENV=development nodemon server.ts"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.14",
    "@types/node": "^18.11.9",
    "nodemon": "^2.0.20",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4"
  }
}

创建我们的Express应用

touch server.ts

然后添加案例代码，在网页中输出“hello world”

 

import express from 'express';
const app = express();
const PORT = 3000;

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

app.listen(PORT, () => {
  console.log(`Express with Typescript! http://localhost:${PORT}`);
});

在终端命令行执行启动命令 yarn run start

yarn run start

浏览器访问：http://localhost:3000/

此外，我们已经通过nodemon监听所有文件的变化，当我们修改文件时，nodemon会帮我们重新打包

 

使用Typescript

使用之前，我们先改造一下项目结果，

• 创建一个src目录，
• src里创建router  -- 所有的业务接口放在这里
• router里创建user.ts
• src下面创建types目录。 -- 所有的ts放这里
• types里创建Global.d.ts

现在的目录如图：

改造server.ts

import express from 'express';
import userRouter from './src/routes/user';

const app = express();
const PORT = 3000;

app.use('/api', userRouter);
app.get('/', (req, res) => {
  res.send('Hello world!');
});

app.listen(PORT, () => {
  console.log(`Express with Typescript! http://localhost:${PORT}`);
});

src/router/user.ts

import express from 'express';
import { UserInfo } from '../types/Global';

const router = express.Router();

router.get('/ts-demo', (req, res) => {
  const userInfo: UserInfo = {
    
  }
  res.json(userInfo);
})

export default router;

src/types/Global.d.ts

export interface UserInfo {
  id: number;
  userName: string;
}

现在我们测试运行： yarn start

ts生效了，约束的ts规则没有在userInfo对象中

 

下面我们修改下router/user.ts,  执行: yarn start

const userInfo: UserInfo = {
    id: 0,
    userName: 'huangcy'
  }

浏览器访问地址：  http://localhost:3000/api/ts-demo

 

打包

执行命令 yarn build

根目录得到一个dist包，我们把dist放到服务器，然后用pm2命令来运行即可

pm2 start server.js

 

好了，这就是express 支持typescript和es6的所有了，如有问题请留言

 

 

文章参考： 地址