使用typescript搭建express

开始

为这个项目创建一个新的目录，使用下面的命令初始化项目并创建一个包。

 NPM init -y

初始化后，让我们安装必要的包

npm i express dotenv cors helmet body-parser 

在express中配置typescript

npm i -D typescript @types/node @types/express @types/dotenv @types/cors @types/helmet

现在我们要在我们的目录中生成 tsconfig.json 文件。使用下面的命令：

 npx tsc --init

打开 tsconfig.json 文件，注释掉 compilerOptions 中的所有字段，并配置 baseUrl 和 outDir

接下来,让我们创建一个 .env 文件，定义所有敏感变量的。

创建.env文件

port=5000

创建 index.ts 文件

然后创建一个 src 文件夹，在该文件夹下创建一个 index.ts 文件，此时目录结构如下所示：

之后我们就在 index.ts 文件中开始编写我们的代码。

import * as dotenv from 'dotenv'
import express from 'express'
import cors from 'cors' 
import helmet from 'helmet'

// 变量
dotenv.config()

const app = express(); 

// 使用中间件
app.use(helmet()); 
app.use(cors()); 
app.use(express.json())

module.exports = app

现在在 src 目录下创建一个 server.ts 文件。

server.ts

require("dotenv").config();
const app = require(".")

const PORT = process.env.PORT || 3000
app.listen(PORT, async () => {
   console.log(`listning on port ${PORT}`)
})

现在我们必须配置我们的开发脚本，我们正在使用的另一个与开发相关的工具是 nodemon，只要文件有变化，就重新启动我们的应用程序或服务器。

此时我们还得安装一个 ts-node 执行引擎。

npm i -D nodemon ts-node

然后在目录中配置一个 nodemon.json 文件。

nodemon.json

{
    "watch" : [
       "src", 
       ".env" 
    ], 
    "ext":"js,ts,json", 
    "ignore": [
        "src/logs/*", 
        "src/**/*.{spec,test}.ts"
    ], 
    "exec": "ts-node --transpile-only src/index.ts"
}

之后在package.json 文件的 scripts 字段中设置一个运行命令用于启动 nodemon。

 "scripts" : {
     "dev" : "nodemon"
 }

现在让我们使用该命令来运行应用程序。

最后，让我们添加一些脚本，比如构建和启动。

"scripts":{
    "dev": "nodemon", 
    "start": "npm run build && node dist/server.js"
    "build": "tsc"
}

如果我们想在生产环境中运行，可以把 NODE_ENV=production 放在命令行中设置成变量 。如果我们想使用条件语句来执行不同的环境，则需要安装 cross-env：

npm i -D cross-env 

"scripts":{
    "dev": "nodemon", 
    "start": "npm run build && cross-env NODE_ENV=production node dist/server.js"
    "build": "tsc"
}

现在我们已经完成了项目的基本配置。

typescript 配置

现在，我们将使用一些额外的工具来改进我们的开发工作流。

typescript有很多的配置，但是我们不能在这一篇文章中涵盖所有的配置，如果我们想学习的话，可以检查官方的配置文档说明。

首先，我们配置了 paths，并用下面的配置更改了 typescript.json 文件。

{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["es2020"],
    "typeRoots": ["node_modules/@types"],
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "module": "commonjs",
    "pretty": true,
    "sourceMap": true,
    "declaration": true,
    "outDir": "dist",
    "allowJs": true,
    "noEmit": false,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "importHelpers": true,
    "baseUrl": "src",
    "paths": {
      "@/*": ["*"],
      "@config/*": ["config/*"],
      "@controllers/*": ["controllers/*"],
      "@databases/*": ["databases/*"],
      "@dtos/*": ["dtos/*"],
      "@exceptions/*": ["exceptions/*"],
      "@interfaces/*": ["interfaces/*"],
      "@middlewares/*": ["middlewares/*"],
      "@models/*": ["models/*"],
      "@routers/*": ["routers/*"],
      "@services/*": ["services/*"],
      "@utils/*": ["utils/*"]
    }
  },
  "include": ["src//*.ts", "src//*.json", ".env"],
  "exclude": ["node_modules", "src/http", "src/logs", "src/tests"]
}

正如我们在上面的代码片段中看到的，我们已经添加了许多不存在的路径,我们很快就建立了我们项目的结构。paths 项允许我们定义一系列条目，这些条目重新映射导入到相对于 baseURL 的查找位置。

路径别名:使用者定义的名称来替代较长的路径。

npm i -D tsconfig-paths tslib 

tsconfig-paths 用于加载在 tsconfig.json 或者 jsconfig.json 文件中定义的 paths 模块。支持在运行时加载和通过API加载。
tslib 用作包含所有tsconfig助手功能的tsconfig的运行库。

为了使用它们，我们必须修改 nodemon.json 文件：

{
    "watch" : [
       "src", 
       ".env" 
    ], 
    "ext":"js,ts,json", 
    "ignore": [
        "src/logs/*", 
        "src/**/*.{spec,test}.ts"
    ], 
    "exec": "ts-node -r tsconfig-paths/register --transpile-only src/server.ts"

}

tsconfig-paths/register 将读取来自 tsconfig.json 中配置的 paths。

验证环境变量

接下来，我们将添加环境变量验证，因为忘记添加环境或不添加环境变量值的正确类型会导致意外错误，导致我们的应用程序故障。

我们使用 envalid 这个库来验证环境变量。

npm i envalid 

我们在 src 文件夹下创建一个 utils 文件夹，并创建一个 validateEnv.ts 文件

让我们来写这个配置

import { cleanEnv, port, str } form "envalid";

const validateEnv = () =>{
  cleanEnv(process.env, {
    NODE_ENV: str(), 
    PORT: port(),
  })
}

export default validateEnv;

写完配置后在 index.ts 文件中引用：

import * as dotenv from 'dotenv'
import express from 'express'
import cors from 'cors' 
import helmet from 'helmet'
import validateEnv from '@utils/validateEnv'

dotenv.config()

validateEnv();
const app = express(); 

app.use(helmet()); 
app.use(cors()); 
app.use(express.json())

module.exports = app

我们可以将环境变量更改为无效，例如将端口更改为字符串 PORT= XYZ

执行命令 npm run dev

它将显示一个错误，例如:

Invalid enviroment variables:
  PORT: Invalid port input: : "xyz"

但是当我们运行 build/start 命令时，我们得到了一个不同的错误：

Error: Cannot find module '@/utils/validateEnv'
This is because we are using a path alias with '@/utils'.

这个是在打包后的 dist 目录里我们的 index.js 文件是 import validateEnv from ‘@/utils/validateEnv’.

当然，我们可以在没有别名的情况下 import。然而，当我们的项目变得更大时，一个路径别名就会变得非常有用。

为了确保 node 找到模块,我们可以使用 ts-alias ，它用 typescript 编译后的相对路径替换别名路径。

npm i -D tsc-alias

我们可以通过将 build 命令修改为以下方式来利用这个包：

"build": "tsc && tsc-alias",

现在让我们运行我们 start 命令来测试它。

此时不应该有任何错误，我们应该在控制台中看到以下内容:

Listening on port 3000