使用 ExpressoTS 的第一个项目

2025-05-28

使用 ExpressoTS 的第一个项目

介绍

ExpressoTS是一个面向服务器端应用程序的全新、开发者友好的 TypeScript 框架。它目前基于Express构建，易于新开发者上手，项目结构轻量易用，支持两种不同的项目结构（固定和非固定版本），并支持 MVC 和非 MVC 架构。固定模板基于清晰架构构建，您将看到固定模板中嵌入了实体、用例、存储库和提供程序等概念。

设置您的第一个 ExpressoTS 项目

啊，开启编程世界任何伟大旅程的第一步——正确的设置。相信我，谁也不想在冒险开始前就迷路。所以，我们别再闲聊了，直接开始吧。

ExpressoTS CLI 的安装

这里有两条路径，但目标是一样的：一个可以正常运行的 ExpressoTS 环境。第一个选项是全局安装 ExpressoTS CLI：

pnpm i -g @expressots/cli
Enter fullscreen mode Exit fullscreen mode

遇到承诺限制问题？不用担心，你还可以使用dlx它来运行 CLI，而无需全局安装。啊，用 CLI 来一夜情的奇妙体验！

pnpx @expressots/cli new expressots-first-project
Enter fullscreen mode Exit fullscreen mode

配置向导

运行命令后，您会看到一个友好的（尽管基于文本的）向导🧙‍♂️。

[🐎 Expressots]

? Project name expressots-first-project
? Package manager pnpm
? Select a template Non-Opinionated :: A simple ExpressoTS project.
? Do you want to create this project? Yes
Enter fullscreen mode Exit fullscreen mode

认真填写表格，但不要想太多。本教程我选择“不固执己见”的模板，因为它能让我们在一开始的学习曲线更平缓。

在 ExpressoTS 新家享受舒适生活 🏡

导航到您的项目

你已经设置好了新的 ExpressoTS 项目。太棒了！是时候进入引擎室，看看内部构造了。

cd expressots-first-project
Enter fullscreen mode Exit fullscreen mode

您现在位于根文件夹中，如果您对默认打包的内容感到好奇，请运行一个快速tree命令。

@expressots/tests/expressots-first-project via  v16.19.0
❯ tree -I node_modules -a
.
├── .eslintrc.js
├── expressots.config.ts
├── .gitignore
├── jest.config.ts
├── package.json
├── pnpm-lock.yaml
├── .prettierrc
├── README.md
├── src
│   ├── app.container.ts
│   ├── app.controller.ts
│   ├── app.module.ts
│   ├── app.usecase.ts
│   └── main.ts
├── test
│   └── app.usecase.spec.ts
├── tsconfig.build.json
└── tsconfig.json

3 directories, 16 files
Enter fullscreen mode Exit fullscreen mode

好了！这些就是你将要用到的文件。

自定义 Prettier 偏好设置

你有自己的编码风格——不是吗？你可以.prettierrc按照自己的喜好调整文件。

{
  "singleQuote": false,
  "trailingComma": "all",
  "endOfLine": "auto",
  "tabWidth": 2
}
Enter fullscreen mode Exit fullscreen mode

让我们快速浏览一下package.json

只需浏览一下该scripts部分，package.json您就会知道启动和运行所有需要了解的信息。

❯ cat package.json | jq ".scripts"
{
  "prebuild": "rm -rf ./dist",
  "build": "tsc -p tsconfig.build.json",
  "dev": "tsnd ./src/main.ts",
  "prod": "node ./dist/main.js",
  "test": "jest",
  "test:watch": "jest --watchAll",
  "test:cov": "jest --coverage",
  "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
  "lint": "eslint \"src/**/*.ts\" --fix"
}
Enter fullscreen mode Exit fullscreen mode

在这里，您可以找到常见的内容：构建、开发、测试等等。

格式化所有内容！

在深入开发之前，我们先把它整理一下。format脚本会处理好这个问题。

pnpm format
Enter fullscreen mode Exit fullscreen mode

以开发模式运行

最后，您一直在等待的时刻到了——启动开发服务器，看看您的应用程序是否活跃起来！

@expressots/tests/expressots-first-project via  v16.19.0
❯ pnpm dev

[INFO] ts-node-dev ver. 2.0.0 (using ts-node ver. 10.9.1, typescript ver. 4.9.5)
Application version not provided is running on port 3000 - Environment: development
Enter fullscreen mode Exit fullscreen mode

在 ExpressoTS 中发出您的第一个请求

是时候打个招呼了！

您已经参观过房子，了解了风水，.prettierrc也把所有脚本都想好了。现在怎么办？那就亲眼看看您的应用实际运行效果如何吧！

使用 HTTPie 执行你的第一个 GET 请求

本次演示我们将使用HTTPie——面向 21 世纪的HTTP 引擎cURL，但可读性更强。以下是如何向 发送您的第一个 GET 请求http://localhost:3000。

@expressots/tests/expressots-first-project via  v16.19.0
❯ http :3000
Enter fullscreen mode Exit fullscreen mode

砰！你应该会看到如下响应：

HTTP/1.1 200 OK
...
Hello Expresso TS!
Enter fullscreen mode Exit fullscreen mode

恭喜！你刚刚让服务器打招呼了。

剖析“Hello Expresso TS！”🦴

好吧，让我们剖析一下这条"Hello Expresso TS!"消息。这个简单的字符串是如何穿过层层 TypeScript 文件到达浏览器的？剧透：这不是什么魔法；它只是一些结构良好的代码。

起点：src/main.ts

接力棒就在这里。在这里，我们从 ExpressoTS 导入必要的组件，并设置初始应用程序实例。很简单。

import "reflect-metadata";
import { AppInstance, ServerEnvironment } from "@expressots/core";
import { container } from "./app.container";

async function bootstrap() {
  AppInstance.create(container);
  AppInstance.listen(3000, ServerEnvironment.Development);
}

bootstrap();
Enter fullscreen mode Exit fullscreen mode

容器：src/app.container.ts

可以把它想象成后台，每个人都在这里为演出做准备。应用程序容器在这里配置你的自定义模块。

import { AppContainer } from "@expressots/core";
import { AppModule } from "./app.module";

const appContainer = new AppContainer();
const container = appContainer.create([AppModule]);

export { container };
Enter fullscreen mode Exit fullscreen mode

模块：src/app.module.ts

ExpressoTS 中的模块将相关功能分组。在这里，只需导入即可AppController。

import { CreateModule } from "@expressots/core";
import { AppController } from "./app.controller";

const AppModule = CreateModule([AppController]);

export { AppModule };
Enter fullscreen mode Exit fullscreen mode

控制器：src/app.controller.ts

这是我们乐团的指挥。它负责处理 HTTP 请求并引导流量。在这种情况下，它只是说"Hello Expresso TS!"：

import { BaseController, controller, httpGet, response } from "inversify-express-utils";
import { Response } from "express";
import { AppUseCase } from "./app.usecase";

@controller("/")
class AppController extends BaseController {
  constructor(private appUseCase: AppUseCase) {
    super("app-controller");
  }

  @httpGet("/")
  execute(@response() res: Response) {
    return res.send(this.appUseCase.execute());
  }
}
Enter fullscreen mode Exit fullscreen mode

用例：src/app.usecase.ts

这里才是真正的"Hello Expresso TS!"生活之地。

import { provide } from "inversify-binding-decorators";

@provide(AppUseCase)
class AppUseCase {
  execute() {
    return "Hello Expresso TS!";
  }
}
Enter fullscreen mode Exit fullscreen mode

“你好，请问是谁？” 更改默认回复

厌倦了千篇一律的代码"Hello Expresso TS!"？那就来点个性化的吧。只需深入src/app.usecase.ts文件即可。瞧，这就是结构良好的代码库的魅力所在；你无需费尽周折就能完成一个简单的修改。

调整：src/app.usecase.ts

一行修改。就这样。这里我们只需将文本替换为"Hello from <Daniel::Boll>"。

@provide(AppUseCase)
class AppUseCase {
  execute() {
    return "Hello from <Daniel::Boll>";
  }
}
Enter fullscreen mode Exit fullscreen mode

重新加载：自动刷新 FTW

保存更改后，开发服务器会立即检测到此更新并重新加载。无需任何手动操作。啊，现代开发的乐趣就在于此。

[INFO] Restarting: /../@expressots/tests/expressots-first-project/src/app.usecase.ts has been modified
Application version not provided is running on port 3000 - Environment: development
Enter fullscreen mode Exit fullscreen mode

结果：让我们再次与服务器对话

运行命令，瞧！更新后的问候语现已从您的服务器直接热传。

Hello from <Daniel::Boll>
Enter fullscreen mode Exit fullscreen mode

深入了解

如果您对在这个简单的 ExpressoTS 项目中可以做的更多事情感兴趣，请务必查看daniel-boll.me上的完整博客。

文章来源：https://dev.to/expressots/a-first-project-with-expressots-30e8
Devto 翻译
PREV
帮助您构建下一个副项目的 API
NEXT
在 NodeJS 中处理 CPU 密集型作业