使用 Express、TypeScript、Nodemon 和 ESLint 创建一个新的 Node.js 应用程序

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

GitHub 仓库

Node.js 是一个开源的跨平台运行时环境，也是一个非常流行的应用程序构建工具。它基于 V8 JavaScript 引擎，因此性能卓越。Node.js 于 2009 年发布，此后一直广受欢迎。其优势之一是使用 JavaScript 编程语言，这意味着服务器端和客户端应用程序都可以使用同一种编程语言。Node.js 平台上有许多流行的框架，其中最流行的是 Express。在本教程中，我将使用 Express 框架。

TypeScript 语言的发布带来了巨大的积极变化。TypeScript 是一种基于 JavaScript 的语言，使用 TypeScript 的一些优势包括：

• 类型检查。
• 编写代码时更容易发现错误。
• 配备 IntelliSense 的卓越工具。
• TypeScript 坚持使用接口。
• 完全遵循SOLID原则。

将代码从 JavaScript 迁移到 TypeScript 并不难，我强烈建议在 Node.js 项目中使用 TypeScript。

创建快速项目。

我们将开始一个新项目。使用以下命令初始化 npm：

npm init -y

上述命令将生成 package.json 文件，npm 需要该文件才能安装软件包。然后安装 Express 和 TypeScript 的依赖项。

npm install --save express
npm install --save-dev typescript ts-node @types/node @types/express

以下是运行基于 TypeScript 的 Express 应用所需的所有依赖项。安装完成后，package.json 文件应如下所示。

{
  "name": "nodejs-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^5.1.0"
  },
  "devDependencies": {
    "@types/express": "^5.0.3",
    "@types/node": "^24.1.0",
    "ts-node": "^10.9.2",
    "typescript": "^5.8.3"
  }
}

运行 TypeScript 代码还需要一个额外的步骤。TypeScript 需要一个配置文件。我们需要创建一个名为 tsconfig.json 的文件，并将其放在根目录下。使用以下命令生成 tsconfig.json 文件：

npx tsc --init

将会创建一个名为 tsconfig.json 的文件，其中包含 TypeScript 的配置信息。新创建的文件包含大量配置，但我们只会考虑其中的一部分。

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "baseUrl": "./"
  }
}

target：指定项目中应使用的 ECMAScript 版本。可用版本包括 ES3（默认）、ES5、ES2015、ES2016、ES2017、ES2018、ES2019、ES2020 或 ESNEXT。

module：指定在生成的 JavaScript 代码中使用的模块管理器。可用选项包括 none、commonjs、amd、system、umd、es2015、es2020 和 ESNext。最常用的模块管理器是 commonjs，也是默认的模块管理器。

outDir：指定构建完成后 JavaScript 代码的输出位置。

rootDir：指定 TypeScript 文件所在的目录。

baseUrl：指定在应用程序中包含文件时的相对路径。

esModuleInterop：此选项默认为 true；它控制 CommonJS 和 ES 模块之间的互操作性。其实现方式是为所有导入创建命名空间对象。

创建应用程序文件

创建一个名为 src 的文件夹，用于存放应用程序文件，然后在该文件夹内创建一个名为 . 的文件server.ts。该文件server.ts将是应用程序的起始点。

import express from 'express';
import { Request, Response } from 'express';

const app = express();

app.get('/', (req: Request, res: Response) => {
  res.send('Application works!');
});

app.listen(3000, () => {
  console.log('Application started on port 3000!');
});

现在我们准备开始构建项目。我们将在 package.json 文件中添加启动和构建应用程序的脚本。请将 package.json 文件中的 script 对象修改为如下所示：

"scripts": {
    "start": "ts-node ./src/server.ts",
    "start:prod": "npm run build && node ./dist/server.js",
    "build": "npx tsc"
},

构建应用程序非常简单。我们需要运行命令npm run build。TypeScript 会读取 tsconfig.json 文件进行配置。之前我们"outDir": "./dist",在配置中设置了，这意味着 TypeScript 会在 dist 文件夹下构建应用程序。

我们可以通过命令运行应用程序：

• npm run start或者仅仅是npm start（开发）
• npm run start:prod（生产环境）

启动应用程序后，我们可以http://localhost:3000在任何浏览器中访问，但我们看到的是Application works!……

节点守护者

Nodemon 是一款广泛使用的工具，它可以跟踪应用程序的更改并自动重启。如果我们不使用 Nodemon，每次更改后都必须停止应用程序并重新启动。

我们可以使用以下命令安装Nodemon：

npm install --save-dev nodemon

在根目录下创建 nodemon.json 配置文件。

{
  "ignore": [".git", "node_modules", "dist"],
  "watch": ["./src"], // <- files inside folder to watch
  "exec": "npm start", // <- command that will be executed when nodemon starts
  "ext": "ts" // <- files to watch
}

当然，请删除注释。在 package.json 的 scripts 文件中添加 nodemon 的附加脚本。

"start:nodemon": "nodemon --exec ts-node ./src/server.ts",

现在我们可以使用命令开始监视应用程序npm run start:nodemon。当我们更改文件夹内的任何 TypeScript 文件时，应用程序将会重启src。

将 ESLint 与 prettier 结合使用

ESLint 是一个 JavaScript/TypeScript 代码检查工具，它可以查找代码中的问题。我无法想象不用 ESLint 来编写 TypeScript 代码。以前我用的是 TSLint，但现在它已被弃用，应该改用 ESLint。我还推荐将 Prettier 和 ESLint 一起使用。
注意：Prettier 也可以用来自动格式化代码（我个人更喜欢这种方式），但本教程不会涉及这方面的内容。

安装依赖项：

npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier @eslint/js typescript-eslint

ESLint 也使用配置文件。为此，请eslint.config.mjs在根目录下创建一个文件。我们可以根据需要配置规则。

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-plugin-prettier';
import prettierConfig from 'eslint-config-prettier';

/** @type {import('eslint').Linter.Config[]} */
export default [
  { ignores: ['dist/**'] },
  { files: ['**/*.{ts}'] },
  {
    languageOptions: {
      globals: globals.browser,
    },
  },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  prettierConfig, // Disables ESLint rules that conflict with Prettier
  {
    plugins: {
      prettier,
    },
    rules: {
      'prettier/prettier': 'error', // Treat Prettier errors as ESLint errors
      'max-len': 'off',
      'no-underscore-dangle': 'off',
      'arrow-body-style': 'off',
      'jsdoc/newline-after-description': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
];

如果需要 ESLint 忽略某些文件夹/文件，请在根目录下添加一个包含配置信息的 `.eslintignore` 文件。为了演示，我添加了一个包含内容的文件。

/dist

现在 ESLint 将忽略 dist 文件夹中的所有文件。

我们还添加了 Prettier 插件，这样代码检查器就能在代码格式不符合 Prettier 配置时发出警告。.pretterrc在根目录下添加一个文件，并根据需要进行调整。我的配置如下：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 130
}

现在我们可以查看代码中是否存在任何错误/警告。如有必要，请重启您的IDE。

总结

本教程介绍了如何从零开始使用 TypeScript 语言开发 Node.js 项目。我们还讲解了如何构建和运行应用程序。Nodemon 用于在代码发生更改时重启应用程序。最后，我们启用了 ESLint 代码检查工具，并根据我们的需求将其与 Prettier 结合使用。